Question

    var theNewParagraph = document.createElement('p');
    var theBoldBit = document.createElement('b');
    var theBR = document.createElement('br');

    theNewParagraph.setAttribute('title','The test paragraph');
    var theText1 = document.createTextNode('This is a sample of some ');
    var theText2 = document.createTextNode('HTML you might');
    var theText3 = document.createTextNode('have');
    var theText4 = document.createTextNode(' in your document');

    theBoldBit.appendChild(theText2);
    theBoldBit.appendChild(theBR);
    theBoldBit.appendChild(theText3);

    theNewParagraph.appendChild(theText1);
    theNewParagraph.appendChild(theBoldBit);
    theNewParagraph.appendChild(theText4);

    document.getElementById('someElementId').appendChild(theNewParagraph);

此外，有人可以通过解释这个来帮助我吗？

Answer 1

您拥有的是JavaScript代码片段。我在代码中添加了注释来解释每个部分：

// Create 3 elements, a <p>, a <b> and a <br>
var theNewParagraph = document.createElement('p');
var theBoldBit = document.createElement('b');
var theBR = document.createElement('br');

// Set the title attribute of the <p> element we created
theNewParagraph.setAttribute('title','The test paragraph');

// Create 4 "text nodes", these appear as text when added to elements
var theText1 = document.createTextNode('This is a sample of some ');
var theText2 = document.createTextNode('HTML you might');
var theText3 = document.createTextNode('have');
var theText4 = document.createTextNode(' in your document');

/* Add the second text node, the <br> element and the 3rd text node to the
   <b> element we created */
theBoldBit.appendChild(theText2);
theBoldBit.appendChild(theBR);
theBoldBit.appendChild(theText3);

/* Add the first text node, the <b> element and the 4th text node to the
   <p> element we created.  All nodes are now descendants of the <p> */
theNewParagraph.appendChild(theText1);
theNewParagraph.appendChild(theBoldBit);
theNewParagraph.appendChild(theText4);

/* Finally, add the <p> element to an element with an id attribute of 
   someElementId, so we can see all the content on our page */
document.getElementById('someElementId').appendChild(theNewParagraph);

结果是以下HTML作为 someElementId 的内容：

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>
  have</b> in your document</p>

其他人已经解释了如何使用<script>元素将此脚本添加到您的文档中。

Answer 2

将上述内容放在页面底部的<script type="text/javascript">中，并确保文档中有<div id="someElementId">。

它正在做的是创建一个新的<p>，<b>和<br>标记。然后它在段落上设置标题，向所有标签添加一些文本，最后将整个混乱添加到标识为#someElementId的元素。

你可以看到它in action here。

Answer 3

这是一个合适的测试工具。将以下内容粘贴到新的.html文件中：

<html><head><script language="javascript"><!--// your javascript here:
function _onload()
{
    var theNewParagraph = document.createElement('p');
    var theBoldBit = document.createElement('b');
    var theBR = document.createElement('br');

    theNewParagraph.setAttribute('title','The test paragraph');

    var theText1 = document.createTextNode('This is a sample of some ');
    var theText2 = document.createTextNode('HTML you might');
    var theText3 = document.createTextNode('have');
    var theText4 = document.createTextNode(' in your document');

    theBoldBit.appendChild(theText2);
    theBoldBit.appendChild(theBR);
    theBoldBit.appendChild(theText3);

    theNewParagraph.appendChild(theText1);
    theNewParagraph.appendChild(theBoldBit);
    theNewParagraph.appendChild(theText4);

    document.getElementById('someElementId').appendChild(theNewParagraph);
}
//--></script></head><body onload='_onload()' id='someElementId'></body></html>

Answer 4

如何运行：

<head>
    <script type="text/javascript">
        function CreateTestParagraph () {
            var theNewParagraph = document.createElement('p'); 
            var theBoldBit = document.createElement('b'); 
            var theBR = document.createElement('br'); 

            theNewParagraph.setAttribute('title','The test paragraph'); 
            var theText1 = document.createTextNode('This is a sample of some '); 
            var theText2 = document.createTextNode('HTML you might'); 
            var theText3 = document.createTextNode('have'); 
            var theText4 = document.createTextNode(' in your document'); 

            theBoldBit.appendChild(theText2); 
            theBoldBit.appendChild(theBR); 
            theBoldBit.appendChild(theText3); 

            theNewParagraph.appendChild(theText1); 
            theNewParagraph.appendChild(theBoldBit); 
            theNewParagraph.appendChild(theText4); 

            document.getElementById('someElementId').appendChild(theNewParagraph); 
        }
    </script>
</head>
<body onload="CreateTestParagraph ()">
    <div id="someElementId"></div>
</body>

您的CreateTestParagraph方法动态创建以下HTML内容：

<p title="The test paragraph">This is a sample of some <b>HTML you might<br>have</b> in your document</p>

并将该内容放入someElementId元素。

相关链接：
createElement method，
createTextNode method，
appendChild method，
getElementById method，
onload event

我怎样才能在HTML中运行它？

4 个答案: