2

在 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没有工作。我应该不使用\n它TextNode还是我以错误的方式使用它？

4

1 回答 1

2

问题

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

document.createElement如果要呈现 HTML，则需要使用。

变化

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

我更改了以下内容：

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

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

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

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

  • 改为。setAttribute()_addEventListener()

  • 而不是一个 long 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');

请参阅工作 jsFiddle 演示

于 2014-01-25T20:34:18.280 回答