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

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> 将此脚本添加到您的文档中元素。