javascript如何在div的后面添加一个其他的元素

Posted 2023-04-01

//1、首先获取div的父节点
//2、创建一个新节点
//3、将新节点添加到div节点后面
//具体操作如下：
var divs = document.getElementsByTagName("DIV");//获取页面中所有div
for(var i=0; i<divs.length; i++)
var div = divs[i];//获取第i个div
var divParent = div.parentNode;//获取该div的父节点
var newNode = document.createTextNode("文本节点");//创建文本节点
var next = div.nextSibling;//获取div的下一个兄弟节点
//判断兄弟节点是否存在
if(next)
//存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode,next);
else
//不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode);


//以下是一些常用js操作
var textNode = document.createTextNode("xxx");//创建文本节点
var elementNode = document.createElement("p");//创建元素节点(p)
var body = document.getElementsByTagName("body")[0];//获取body节点
body.appendChild(elementNode);//元素节点添加到body节点下，添加在末尾
elementNode.appendChild(textNode);//将文件节点添加到元素节点下
//获取要删除的节点，elementNode.length-1 表示最后一个指定节点(这里表示最后一个p节点)
var delElementNode = elementNode.item(elementNode.length-1);
body.removeChild(delElementNode)；//移除指定节点
body.insertBefore(newNode, oldNode);//在body中的oldNode前插入newNode节点
body.replaceChild(newNode, oldNode);//将body中的oldNode替换为newNode节点
//创建一个新的属性
var style = document.createAttribute("style");
//为节点添加新属性
option.attributes.setNamedItem(style);
//设置新属性的值
option.setAttribute("style","color:red"); 参考技术A var
doc=document.createElement("p");
//创建P元素
var
str=document.createTextNode("Hello
Word");//创建文本节点
doc.appendChild(str);//将文本节点加入P中var
objdiv=document.getElementById("nv");objdiv.appendChild(doc);//再将元素加到指定DIV中！你测试一下就行了！

如何在使用javascript单击div中的链接时禁用div中的所有其他链接[重复]

【中文标题】如何在使用javascript单击div中的链接时禁用div中的所有其他链接[重复]

【英文标题】：How to disable all other links in a div on click of a link in div using javascript [duplicate]

【发布时间】：2021-12-28 04:07:24

【问题描述】：

我是 Javascript 新手。我希望在单击 div 中的链接时禁用 div 中的所有其他链接。 如果我单击该 div 中的任何链接，该 div 中的其他链接应禁用且不可单击。

此代码不会在单击任何按钮时使链接无法单击。如果单击任何链接，则该 div 中的其他链接应禁用且不可单击。例如，如果点击接受链接，则接受、拒绝和还价链接应该是不可点击和禁用的。

输出

function disableButton() 
  document.querySelector("#notify-div a").removeAttribute("href");

<div id="notify-div">
  user_name has requested a bid price of bid for quantity of qty for mileage mileage_name of truck truck_name.
  <br> <a href='/truckianAccept/".$lastId."' id='accept' class='btn btn-primary' onclick='disableButton();'>Accept </a>
  <a href='/truckianDecline/".$lastId."' id='decline' class='btn btn-primary' onclick='disableButton();'>Decline </a> <a href='/wstCounterOffer/".$lastId."' id='counter' class='btn btn-primary' onclick='disableButton();'>Counter Offer </a>";
</div>

【问题讨论】：

查看此question，特别是此answer，了解如何执行此操作。

除非您使用 localStorage 或其他东西，否则您无法禁用链接并点击链接

【参考方案1】：

您没有删除href，而是设置了一个在css中捕获指针事件的类。

function disableButtons() 
  const links = document.querySelectorAll("#notify-div a");

  links.forEach(function(link) 
    link.classList.add('disabled');
  );

CSS：

.disabled 
  pointer-events: none;

请注意，href 和 onClick 不能一起使用。您应该将特定函数传递给处理该功能并随后禁用按钮的每个链接。

【讨论】：

不工作，按钮未禁用，此代码执行后

什么不起作用？当您单击链接时，该解决方案会阻止执行任何代码，根据定义，该链接是“禁用的”。如果您希望链接看起来不同，当然您必须更改样式。如何做到这一点也在已链接的answer 中进行了说明。请记住，您不能同时使用href 和onclick。

那么href可以使用哪个函数呢？

无。您可以使用 href 属性进行 url 重定向或 onClick 执行逻辑步骤。在您的情况下，您需要使用onClick。在您传递的函数中，您首先执行连接到按钮的逻辑，然后调用该函数以禁用其他按钮。

接受 .这是正确的调用方式吗？