javascript - createNewElement 和 appendChild 到现有内容

Question

我试图更好地理解 JavaScript，但在创建元素和向它们附加值时遇到了麻烦。

我要做的就是创建一个新的段落元素，其中将包含一个新字符串，然后使用 appendChild 将该段落添加到我现有的 div 标签中。

var oldParagraph = document.getElementById('content')
var newParagraph = document.createElement('p');
var text = document.createTextNode("i am a new text node.");

newParagraph.setAttribute('class', 'red');

function addText(){
     document.oldParagraph.appendChild(newParagraph);
     document.newParagraph.appendChild(text);
}

我的 HTML 很简单：

<div id="content"></div>

Answer 1

你的代码应该是这样的：

function addText(){
     oldParagraph.appendChild(newParagraph);
     newParagraph.appendChild(text);
}

oldParagraph并且newParagraph是包含 DOM 对象引用的变量。您直接对这些 DOM 引用进行操作。

在实践中，我认为你会用局部变量而不是全局变量来组织你的代码：

function addText() {
    var newParagraph = document.createElement('p');
    newParagraph.className = 'red';
    newParagraph.appendChild(document.createTextNode("i am a new text node."));
    document.getElementById('content').appendChild(newParagraph);
}

工作演示：http: //jsfiddle.net/jfriend00/42ffq/。