0

如何使用 javascript 在下面的代码中插入一些文本？任何帮助表示赞赏，因为我仍然是 javascript 的新手。

<div class = "post-body entry-content">
<div class = "auto-thumbnail">
<table width = "500px" height = "auto" border = "0" align = "center">
<tbody>
<tr><td>
<a href = "http://www.google.com" target = "_blank"><img src = "example.jpg" border = "0"/></a><br /><br />

Author : Jason<br />
Book Title : Example Book<br />
Release Date : 2013.05.11<br /><br />
Description : <br /><br />
Here is where I want to add some text<br /><br /><!--Add text on this line-->
Hello, example....<br />
<br />
</td></tr>
</tbody>
</table>
</div>
</div>
4

3 回答 3

1

在文本周围放置一些<p>标签，带有id属性，然后用于document.getElementById()更改文本：

<p id = "textline">I want to add some text here</p><br /><br />

<script type = "text/javascript">
function changeText()
{
document.getElementById("textline").innerHTML = "changed text";
}
</script>

记住要更改文本时调用该函数。更好地描述您想要做什么以及为什么要这样做会很好。

编辑：

<p class = "textline">I want to add some text here</p><br /><br /><!--script will affect both lines-->
<p class = "textline">I want to add some text here</p><br /><br />
    <script type = "text/javascript">
    function changeText()
    {
    document.getElementsByClassName("textline").innerHTML = "changed text";
    }
    </script>

编辑2：

if(document.getElementById("your_id")!=null)
{
document.getElementById("your_id").innerHTML = "changed text";
}
else
{
alert("Element does not exist");
}
于 2013-05-11T07:36:32.347 回答
1

我将提供两种方法来做到这一点。一个是我认为是最佳实践（第一个），另一个是对您的代码的最小修改（第二个）。

第一：我会怎么做：

注意：在表格中存储这样的数据并不理想，DIV元素就是为此而设计的。我不会尝试重写它。这只是关于 JS 的最佳实践。

我建议<span>为此使用标签，因为您可以将其设置为完全显示它不存在的样式（它是一个inline而不是block元素，但它很容易选择。

...
<a href = "http://www.google.com" target = "_blank"><img src = "example.jpg" border = "0"/></a><br /><br />

Author : Jason<br />
Book Title : Example Book<br />
Release Date : 2013.05.11<br /><br />
Description : <br /><br />
<span id='description'>Here is where I want to add some text</span><br /><br />
Hello, example....<br />
<br />
...

要替换它，您只需执行以下操作：

document.getElementById('description').innerHTML = "Your Text";

第二：你想怎么做：

这并不是说不使用 span 就无法替换。您将不得不给您DIV的id描述符而不是（或以及）class（aclass不是唯一的，因此无法判断DIV您要影响哪个。

您可以阅读整个HTML，auto-thumbnail然后使用正则表达式替换占位符，如下所示：

<div id="auto-thumbnail">
    <table width = "500px" height = "auto" border = "0" align = "center">
        <tbody>
        <tr><td>
            <a href = "http://www.google.com" target = "_blank"><img src = "example.jpg" border = "0"/></a><br /><br />

            Author : Jason<br />
            Book Title : Example Book<br />
            Release Date : 2013.05.11<br /><br />
            Description : <br /><br />
            {DESCRIPTION}<br /><br /><!--Add text on this line-->
            Hello, example....<br />
            <br />
        </td></tr>
        </tbody>
    </table>
</div>

你在这里要做的是有一个 JavaScript 函数，它获取这个 DIV 的内部内容，然后用{DESCRIPTION}你想要的描述替换占位符。

function replaceDescription(newdescription) {
    var regexp = new RegExp("{DESCRIPTION}");
    document.getElementById('auto-thumbnail').innerHTML = document.getElementById('auto-thumbnail').innerHTML.replace(regexp, "Your Description");
}

不过，这将比第一种格式慢得多，所以我完全推荐使用它。

于 2013-05-11T10:11:57.943 回答
0

我建议你看看模板框架 http://handlebarsjs.com/

或者您也可以使用其他“javascript 模板框架”，只需 google 一下。我更喜欢车把，因为它对我来说简单直观

如果您需要更高级的框架，请查看http://angularjs.org/

对于一条简单的线，您可以通过 imulsion 使用答案。或者如果你打算使用 jQuery，它会像

$("#textline").text("changed text");
于 2013-05-11T07:44:16.043 回答