如何将元素添加到DOM

我需要一个函数，它创建元素并向该元素添加文本，并将该新元素添加到DOM中的某个位置。我很喜欢这个。我发现这个函数，但我不知道如何automaticaly指定位置，以便我可以调用函数，例如指定第三个参数作为我想追加新元素的元素。如何将元素添加到DOM

function appendElement (elemNode,textNode) { 
      var element = document.createElement(elemNode); 
      var text = document.createTextNode(textNode); 
      element.appendChild(text); 
      document.body.appendChild(element); 
} 
appendElement("b","lorem");

来源

2014-09-22 Mike

将'document.body'更改为您要附加它的容器。 – elclanrs 2014-09-22 06:41:56

https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild – MarsOne 2014-09-22 06:43:02

是的，但我需要在几个位置。我如何指定要添加元素的位置。像这样appendElement（“b”，“lorem”，“body”）; appendElement（“b”，“lorem”，“div”）; appendElement（“b”，“lorem”，“span”）; – Mike 2014-09-22 06:45:18

这里有一个办法做到这一点的一条线：

function appendElement (elemNode, textContent, parent) { 
 
    parent.appendChild(document.createElement(elemNode)).textContent = textContent; 
 
} 
 

 
appendElement("b","lorem", document.getElementById("container"));

div { background-color: aqua }

<div id="container"></div>

来源

2014-09-22 07:58:41

function appendElement (elemNode,textNode,containerToAppend) { 
     var container = document.getElementById(containerToAppend); 
     var element = document.createElement(elemNode); 
     var text = document.createTextNode(textNode); 
     element.appendChild(text); 
     container.appendChild(element); 
} 
appendElement("b","lorem","ContainerId");

来源

2014-09-22 06:46:22

这里是我的尝试。从developer.Mozilla.org完全撕下一点小小的调整。

JSFIDDLE DEMO

的Javascript：

function addElement() { 
    // Create a new div element and give it some content 
    var newDiv = document.createElement("div"); 
    var newContent = document.createTextNode("Hi there and greetings!"); 
    newDiv.appendChild(newContent); //Add the text node to the newly created div. 

    // Add the newly created element and its content into the Parent of the clicked button 
    var parentDiv = event.target.parentNode; 
    document.body.insertBefore(newDiv, parentDiv); 
}

HTML

<div id="div1"> 
    <input type="button" onclick="addElement(event)" value="Click me to add div" /> 
</div> 
<div id="div2"> 
    <input type="button" onclick="addElement(event)" value="Click me to add div" /> 
</div> 
<div id="div3"> 
    <input type="button" onclick="addElement(event)" value="Click me to add div" /> 
</div>

来源

2014-09-22 06:56:29 MarsOne

function appendElement (elemNode,textNode,containerToAppend) { 
    var container = document.getElementById(containerToAppend); 
    var element = document.createElement(elemNode); 
    var text = document.createTextNode(textNode); 
    element.appendChild(text); 
    container.appendChild(element); 
} 
appendElement("p","this is text","ContainerId");

来源

2014-12-02 11:26:02

如何将元素添加到DOM

回答

相关问题