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>

@Juhana, sorry because i am new here and after i put the code in my post there has problem and the post cannot be published. — wskstack
– wskstack, Commented May 11, 2013 at 7:52
@wskstack you probably didn't indent it. When posting code, highlight it and press ctrl+k. It will work then. — imulsion
– imulsion, Commented May 11, 2013 at 7:57

imulsion · Accepted Answer · 2013-05-11 09:08:06Z

1

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

edited May 11, 2013 at 9:08

answered May 11, 2013 at 7:36

imulsion

9,07620 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

wskstack Over a year ago

I had try this befre and it works but i had a lots of posts before so what i mean is there anyway that i can using the javascript to post the some text to all of the post instead of just change them by adding the id one by one?

imulsion Over a year ago

@wskstack yes, if you give all of your posts tags, use the class attribute rather than the id attribute. Editing my answer.

wskstack Over a year ago

but badly i didn't add anything like the attribute to all post but just simply plain text. Is that it is hard to add text if it is like my condition?

imulsion Over a year ago

@wskstack You should always put plain text in tags. If you don't add styles, it appears exactly the same as if they weren't there, but you can use them like I did to identify elements in your HTML

wskstack Over a year ago

i just notice that if the document.getElementById() doesn't find the id on the page it will give an error in internet explorer which is document.getElementById() is null or not an object. How can i make the error checking for this document.getElementById() so that if the page doesn't find the id, it will not execute the document.getElementById() action? Thank you!

|

Glitch Desire · Accepted Answer · 2013-05-11 10:11:57Z

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

Community · Accepted Answer · 2013-05-11 09:03:06Z

0

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

edited May 11, 2013 at 9:03

CommunityBot

11 silver badge

answered May 11, 2013 at 7:44

anups

5831 gold badge8 silver badges18 bronze badges

1 Comment

wskstack Over a year ago

#textline means i also need to add an id which is textline to the osts?

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related