Question

我正在尝试在隐藏的div div之前添加新的ValidationSummary1

var existingNode = document.getElementById('ValidationSummary1')
var addin = document.createElement('div')
addin.innerHTML = "Hello World!"
existingNode.insertBefore(addin,existingNode[0])

<div>
    <div id="ValidationSummary1" class="Error" style="color:Red;display:none;">
    </div>
</div>

任何帮助将不胜感激。

Answer 1

要使.insertBefore()工作，您需要引用父节点代替

Node.insertBefore()方法在参考节点之前插入一个节点，作为指定父节点的子节点。

var existingNode = document.getElementById('ValidationSummary1')
var addin = document.createElement('div');
existingNode.parentNode.insertBefore(addin,existingNode);

Answer 2

您可以将属性id设置为可以用来设置textContent属性的元素。您还必须定位新插入节点的parentNode：

var existingNode = document.getElementById('ValidationSummary1');
var addin = document.createElement('div');
addin.id = 'newDiv';
existingNode.parentNode.insertBefore(addin,existingNode);
document.getElementById('newDiv').textContent = 'hello world';

<div>
    <div id="ValidationSummary1" class="Error" style="color:Red;display:none;">
    </div>
</div>

Answer 3

尝试一下：

   const parent = document.getElementById('ValidationSummary1');
   const element = document.createElement('div');
   parent.insertAdjacentElement('beforebegin', element);

您可以使用以下修饰符使用insertAdjacentElement的第一个参数控制插入：beforebegin，afterbegin，beforeend，afterend

Answer 4

您需要先选择父Div才能添加。

JS

 var parentDiv = document.getElementById("ValidationSummary1").parentElement;    
 parentDiv.innerHTML += '<div id="newID"></div>';

Answer 5

.insertBefore()的解决方案

var existingNode = document.getElementById('ValidationSummary1').parentNode; // Selects the parent node of hidden div
var addin = document.createElement('div')
addin.innerHTML = 'hello world';
existingNode.insertBefore(addin, existingNode.firstChild); // inserting adding before firstchild of existingNode

<div>
    <div id="ValidationSummary1" class="Error" style="color:Red;display:none;">
      Hidden Content
    </div>
</div>

如何在隐藏的<div>上方添加<div>

5 个答案: