如何使用JavaScript添加一些文本发布？

Question

如何使用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>

Answer 1

在文本周围放置一些带有id属性的<p>标签，然后使用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");
}

Answer 2

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

第一：我将如何做到：

注意：在表格中存储这样的数据并不理想， 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";

第二：你想怎么做：

这并不是说如果不使用跨度就无法更换。 你必须给你的DIV一个id描述符而不是（或者和） class （一个class不是唯一的，所以没有办法告诉你试图影响哪个DIV 。

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

<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");
}

这将比第一种格式慢得多，所以我完全建议使用它。

Answer 3

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

或者你也可以使用其他“javascript模板框架”，只是google它。 我更喜欢把手bcoz，它简单直观

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

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

$("#textline").text("changed text");