Question

我的HTML有

cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

以下语法无效。

cell.appendChild(document.createElement('br')).appendChild(document.createTextNode("Another text"));

在单元格的内容之后，我有一个换行符，然后是同一个单元格中的小写字母。我该怎么办？

Answer 1

首先，您要将文本节点附加到没有子节点的BR标记。

尝试将您的行分为两个调用：

cell.appendChild(document.createElement('br'));
cell.appendChild(document.createTextNode("Another text"));

Answer 2

看起来你正在尝试将方法调用链接起来...抱歉！没有链接原生元素。如果您想要链接，请尝试jQuery，否则请尝试：

var cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

// To make some text smaller you'll need it in a different element like a span
var span = document.createElement('span');
span.className = 'your-class-for-small-text';
span.appendChild(document.createTextNode("Another text"));

cell.appendChild(document.createElement('br'));
cell.appendChild(span);

您必须在样式中添加一些css以包含较小的文本：

<style type="text/css">
    .your-class-for-small-text {
        font-size: 12px;
    }
</style>

或者你可以修改该元素的样式而不是使用className：

var cell = document.createElement("td");
cell.appendChild(document.createTextNode(contents));
cell.setAttribute('width', '100');

// To make some text smaller you'll need it in a different element like a span
var span = document.createElement('span');
span.style.fontSize = '12px';
span.appendChild(document.createTextNode("Another text"));

cell.appendChild(document.createElement('br'));
cell.appendChild(span);

Answer 3

如何使另一个文本更小

我猜你正在尝试应用Subscript text in HTML中的代码：

cell.appendChild(document.createElement('sub')).appendChild(document.createTextNode(subdata));

这是有效的，因为Node.appendChild返回它刚刚附加的子元素，它是一个子元素。第二个appendChild调用将文本节点放在子元素中。这个不能使用br，因为br是一个空元素，你不能在其中放任何东西。你可以把它放在它之后，但那不是代码所做的。

虽然你可以使用子元素（在附加br之后使用上面的行），但使用样式化的块元素可能更好：

cell.appendChild(document.createElement('div'));
cell.lastChild.className= 'less-important';
cell.lastChild.appendChild(document.createTextNode(subdata));

样式表中的

：

.less-important { font-size: 80%; }

JavaScript DOM代码无效

3 个答案: