Question

我正在开发一个应用程序，该应用程序使用DOM以HTML格式向用户打印一些文本。下面你可以看到我的代码，我有一些问题。

是否有其他方法可以使用需要较少代码的DOM（不使用innerHTML）创建下面的文本？
使文本变为粗体的最佳方法是，例如。 “名字”（只是文字，而不是变量中的内容）？

这是我的JS：

header.appendChild(headertext);
p.appendChild(header);

var p2 = document.createElement('p');

var br = document.createElement('br');
var text1 = document.createTextNode("Firstname: " + firstname);
p2.appendChild(text1);
p2.appendChild(br);

var br2 = document.createElement('br');     
var text2 = document.createTextNode("Lastname: " + lastname);
p2.appendChild(text2);
p2.appendChild(br2);

var br3 = document.createElement('br');
var text3 = document.createTextNode("Zip code: " + zipcode);
p2.appendChild(text3);
p2.appendChild(br3);

var br = document.createElement('br');
var text4 = document.createTextNode("Phone nr: " + phonenr);
p2.appendChild(text4);
p2.appendChild(br);

square.appendChild(p);
square.appendChild(p2);

Answer 1

我会重构这个

var br2 = document.createElement('br');     
var text2 = document.createTextNode("Lastname: " + lastname);
p2.appendChild(text2);
p2.appendChild(br2);

进入辅助函数：

function appendTextNode(tagToAppend, textValue){
    var br2 = document.createElement('br');     
    var text2 = document.createTextNode(textValue);
    tagToAppend.appendChild(text2);
    tagToAppend.appendChild(br2);
}

然后：

var p2 = document.createElement('p');

appendTextNode(p2, "Firstname: " + firstname);
appendTextNode(p2, "Lastname: " + lastname);
appendTextNode(p2, "Zip code: " + zipcode);
appendTextNode(p2, "Phone nr: " + phonenr);

要回答您的第二个问题，要将此文字设为粗体，我会创建如下所示的内容

（我知道你提到没有使用innerHTML，但我解释为不想使用innerHTML来转储大型预先形成的html块）

var text2 = document.createElement('span');
text2.innerHTML = textValue;
text2.style.fontWeight = 'bold';
tagToAppend.appendChild(text2);

Answer 2

你会像这样使用模板引擎：

<script type="text/x-some-random-templating-engine" id="address-template">
    <p>
        Firstname: <?= firstname ?><br>
        Lastname: <?= lastname ?><br>
        Zip code: <?= zipcode ?><br>
        Phone nr: <?= phonenr ?><br>
    </p>
</script>

然后：

document.body.appendChild( RandomTemplatingEngine.parse( "address-template" ).evaluate({
    firstname: "John",
    lastname: "Doe",
    zipcode: 12345,
    phonenr: 123456789
    })
);

您可以自己创建模板引擎，也可以在internet或here

上找到模板引擎

Answer 3

这是一种缩短主要代码的替代方法：

p.appendChild(header).appendChild(headertext);

var p2 = document.createElement('p'),
    data = [ "Firstname: " + firstname,
             "Lastname: " + lastname,
             "Zip code: " + zipcode,
             "Phone nr: " + phonenr ],
    len = data.length;

while( len-- ) {
    p2.appendChild( document.createTextNode( data[len] ) );
    p2.appendChild( document.createElement( 'br' ) );
}
square.appendChild(p);
square.appendChild(p2);

要设置第一个单词的样式，请将其包装在您选择的元素中。不需要比上面的代码更多：

p.appendChild(header).appendChild(headertext);

var p2 = document.createElement('p'),
    data = [ ["Firstname: ", firstname],
             ["Lastname: ", lastname],
             ["Zip code: ", zipcode],
             ["Phone nr: ", phonenr] ],
    len = data.length;

while( len-- ) {
    p2.appendChild( document.createElement( 'strong' ) )
      .appendChild( document.createTextNode( data[len][0] ) );
    p2.appendChild( document.createTextNode( data[len][1] ) );
    p2.appendChild( document.createElement( 'br' ) );
}
square.appendChild(p);
square.appendChild(p2);

<强> JSFIDDLE DEMO

使用较少的代码生成带有DOM的文本

3 个答案: