Javascript，再添加一个元素...

发布于 2024-11-27 09:37:22 字数 1081 浏览 2 评论 0原文

我正在学习这些东西，所以这是我最简单的脚本：

var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td");

    t.style.width = "100%";
    t.style.borderCollapse = 'collapse';
    t.border=1;



    // note the reverse order of adding child        
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);

   // more code to populate table rows and cells
   document.getElementById("theBlah").appendChild(t);
   alert(t);
   }

现在我想添加一些将在中显示的内容，所以我想：

td.appendChild(document.createTextNode(title));

这效果很好...... 但如果标题包含 html，例如一个简单的粗体标签，就像这样 Hello;名字！ 我们该怎么做？

我认为我们为 创建一个新元素，但是......在那之后，我不知道该怎么做。只是为了澄清，我希望最终结果是 Hello name! 最终出现在 TD 标签中，如下所示：

<td>Hello<b> name!</b></td>

请帮忙！！

编辑; 是的，我知道我可以通过 InnerHTML 做到这一点，但我需要这样做才能通过 Firefox AMO 政策抱歉应该早点提到这一点......

原文

I am learning this stuff so this is my most simple script:

var t  = document.createElement("table"),
    tb = document.createElement("tbody"),
    tr = document.createElement("tr"),
    td = document.createElement("td");

    t.style.width = "100%";
    t.style.borderCollapse = 'collapse';
    t.border=1;



    // note the reverse order of adding child        
    tr.appendChild(td);
    tb.appendChild(tr);
    t.appendChild(tb);

   // more code to populate table rows and cells
   document.getElementById("theBlah").appendChild(t);
   alert(t);
   }

Now I want to add something that will be displayed in <td>, so I figured:

td.appendChild(document.createTextNode(title));

which works great...
but if title contains html, for example a simple bold tag, like so Hello name!
how do we do that?

I think we create a new element for  but... after that, i have no idea how to do it.
Just to clarify, I want the end result to be that Hello name! ends up in the TD tag like this:

<td>Hello<b> name!</b></td>

Please help!!

EDIT;
Yes, I know I can do this via InnerHTML, but I need to do it this way to get it past Firefox AMO policies
Sorry shoulda mentioned this earlier...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦毁影碎の 2024-12-04 09:37:22

尝试使用 td.innerHTML 代替。这样您就可以放心地将标签作为标记传递。

回复收藏 0 原文

归途 2024-12-04 09:37:22

您可以将innerHTML 分配给要附加的元素。

td = document.createElement("td");
td.innerHTML = "<em>OMG!</em> I can has <strong>HTML<strong>!"
tr.appendChild(td);

You'd assign the innerHTML to the element you want to append.

td = document.createElement("td");
td.innerHTML = "<em>OMG!</em> I can has <strong>HTML<strong>!"
tr.appendChild(td);

回复收藏 0 原文

娇俏 2024-12-04 09:37:22

尝试：

var td = document.createElement("td");
var b = document.createElement("b");
b.appendChild(document.createTextNode(" name!"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

结果：Hello name!

示例：http://jsfiddle.net/hGF3e/

Try:

var td = document.createElement("td");
var b = document.createElement("b");
b.appendChild(document.createTextNode(" name!"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

Result: <td>Hello name!</td>

Example: http://jsfiddle.net/hGF3e/

回复收藏 0 原文

一枫情书 2024-12-04 09:37:22

正如其他人提到的，您可以做的最简单的事情是：

td.innerHTML = "Hello<b> name!</b>";

您还可以这样做：

var b = document.createElement('b');
b.appendChild(document.createTextNode(" name"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

另外，正如您所知，标记在技术上已被弃用。您应该使用或 来代替。

As the other folks have mentioned, the simplest thing you can do is:

td.innerHTML = "Hello<b> name!</b>";

You can also do:

var b = document.createElement('b');
b.appendChild(document.createTextNode(" name"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

Also, just so you know, the  tag is technically deprecated. You should use  or  instead.

回复收藏 0 原文

~没有更多了~