How can i add some text to post by using JavaScript?

Question

How can I use javascript to insert some text at the point in the code below? Any help is appreciated because I am still newbie in 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

Put some <p> tags around the text, with an id attribute, then use document.getElementById() to change the text:

<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>

Remember to call the function when you want to change the text. A better description of what you wanted to do and why you wanted to do it would have been nice.

EDIT:

<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>

EDIT 2:

if(document.getElementById("your_id")!=null)
{
document.getElementById("your_id").innerHTML = "changed text";
}
else
{
alert("Element does not exist");
}

Answer 2

I'm going to offer two ways to do this. One is what I'd consider to be a best practice (first), and the other is the smallest modification to your code (second).

First: How I would do it:

Note: Storing data like this in tables is not ideal, DIV elements are designed for this. I'm not going to try to rewrite it though. This is just a best practice with regards to the JS.

I would suggest using the <span> tag for this, as you can style it to display exactly as if it wasn't there (it's an inline rather than block element, but it's very easy to select.

...
<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 />
...

To replace this, you can simply do the following:

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

Second: How YOU want to do it:

This is not to say that it's impossible to replace without using the span. You would have to give your DIV an id descriptor instead of (or as well as) class (a class is not unique so there'd be no way to tell which DIV you're trying to affect.

You could read the entire HTML of the auto-thumbnail , then use a regular expression to replace a placeholder, something like this:

<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>

What you'd do here is have a JavaScript function which gets the inner content of this DIV, then replaces the {DESCRIPTION} placeholder with the description you want.

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

This will be much slower than the first format, though, so I totally recommend using that.

Answer 3

I suggest you have a look at templating framework http://handlebarsjs.com/

Or you could use other "javascript templating frameworks" too, just google it. I prefer handlebars bcoz its simple and intuitive for me

If you need more advanced framework look at http://angularjs.org/

For a simple line you could use the answer by imulsion. Or if you plan to use jQuery it will be like

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