javascript -\n 不适用于 javascript 中的文本节点

Question

在 TextNode 的这段代码中，我尝试通过在以下代码中使用 \n 将字符串放在不同的行中:

var CC = function(valu, name, age){
        var parent = document.createElement("div");
            parent.id = valu;
            parent.setAttribute("onclick", "info()");
            parent.style.color = "blue";
        var heading = document.createTextNode("phone no: "+valu+"\n Name:"+name+" \nAge: "+age);
        parent.appendChild(heading);    

        var ele = document.getElementById("main");
        ele.appendChild(parent);

        }(valu, name, age);

然后当我尝试这个时，在行中: var heading = document.createTextNode("phone no: "+valu+"\n Name:"+name+"\nAge: "+age);\n 不工作。我不应该在这个 TextNode 中使用 \n 还是我以错误的方式使用它？

Answer 1

问题

问题是 document.createTextNode 阻止文本呈现为 HTML。

如果你想渲染 HTML，你需要使用 document.createElement。

---

变化

为了获得您代码的工作演示，我不得不进行一些即兴创作。

我更改了以下内容:

• 将 CC() 转换为一个简单的函数，因为我不知道您的其余代码是什么样的。

• 将 valu 参数更改为 phone。不确定 valu 是什么意思。

• 添加了一个全局变量 id，它会在您每次调用 CC() 方法时递增，以便创建的 div 保持唯一的 id。

• 在 CC() 函数中，我创建了文本节点变量来表示传入的每个参数(姓名、电话和年龄)。

• 将 setAttribute() 更改为 addEventListener()。

• 我只是多次显示每个步骤，而不是一个长长的 appendChild()，每个文本节点之间有 document.createElement("br") .

• 另请注意，我添加了 info() 函数，它会提醒 div 的信息被单击。

---

JavaScript

var id = 1;

function info()
{
    alert(this.innerText);
}

function CC (name, phone, age) 
{
    var parent = document.createElement("div"),
        nameText = document.createTextNode("Name: " + name),
        phoneText = document.createTextNode("Phone: " + phone),
        ageText = document.createTextNode("Age: " + age);

    parent.id = 'div' + id.toString();
    parent.style.color = "blue";
    parent.addEventListener("click", info, false);

    parent.appendChild(nameText);
    parent.appendChild(document.createElement("br"));
    parent.appendChild(phoneText);
    parent.appendChild(document.createElement("br"));
    parent.appendChild(ageText);
    parent.appendChild(document.createElement("br"));

    document.getElementById("main").appendChild(parent);
    id++;
}

CC('John Doe', '123.456.7890', '40');

See working jsFiddle demo