insert text in html tag using javascript

Question

I have following code in cshtml page:

<ul id="menu">
  <li><a href="..." >Link1</a></li>
  <li><a href="..." >Link2</a></li>
</ul>

And I want to change class of a tag when some condition is true. I tried this, but it does not work:

<ul id="menu">
  <li 
    <script> if (..condition..) 
      document.write(" class = \"newclass\"");
    </script>
  ><a href="..." >Link1</a></li>
  <li><a href="..." >Link2</a></li>
</ul>

Could you please suggest the way to do it?

Thanks, Zhenya

What is the condition that needs to be met? Should the class apply to all li elements under menu or a specific li element? If a specific one, which element? — pete
– pete, Commented Jun 18, 2013 at 10:32
document.write writes to the output... and not to the markup itself! — icyflame
– icyflame, Commented Jun 18, 2013 at 10:36

Darren · Accepted Answer · 2013-06-18 10:34:30Z

2

Try giving the li an ID as shown below:

 <li id="list"><a href="..." >Link1</a></li>
 <li><a href="..." >Link2</a></li>

Then in your JavaScript try:

if (condition) {
   var element = document.getElementById("list");
   element.className = "newclass";
}

JSFiddle:

http://jsfiddle.net/bVGFP/

edited Jun 18, 2013 at 10:34

answered Jun 18, 2013 at 10:31

Darren

71.2k24 gold badges141 silver badges146 bronze badges

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

1 Comment

BenM Over a year ago

I just edited the variable reference when setting the className property.

Jan Turoň · Accepted Answer · 2013-06-18 10:43:26Z

0

Please give an id to the li

<li id="test"></li> access the <li> by id

$("#test").addClass("classname");

edited Jun 18, 2013 at 10:43

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

answered Jun 18, 2013 at 10:40

Jibu K

5345 silver badges3 bronze badges

1 Comment

Felix Kling Over a year ago

What is $ here? It's not a native DOM or JavaScript function.

Mirko Cianfarani · Accepted Answer · 2013-06-18 10:48:29Z

0

You have to use document.innerHTML because document.write need the reload page.

<ul id="menu">
                <li  
                    //This is not valid syntax
                    <script> if (..condition..) 
                                document.write(" class = \"newclass\"");
                    </script>
                   ><a href="..." >Link1</a></li>
                <li><a href="..." >Link2</a></li>
            </ul>

Then for you case, I suggest for you

    <ul id="menu">
                    <li id="po"><a href="..." >Link1</a></li>
                    <li ><a href="..." >Link2</a></li>
                </ul>

<script>
document.getElementById("po").className = "newclass";
                        </script>

edited Jun 18, 2013 at 10:48

answered Jun 18, 2013 at 10:34

Mirko Cianfarani

2,1331 gold badge25 silver badges40 bronze badges

2 Comments

Felix Kling Over a year ago

"document.write need the reload page" That's correct. Once the document was completely parsed, documen.write will overwrite the whole document, it won't reload the page. However using document.write while the document is still being parsed is perfectly fine (theoretically). It will just insert the data where it is called. The problem here is that the OP tried to use <script> tags inside an opening tag of another element which is simply invalid HTML. Using document.write is not the problem, although using it is not very good either.

Mirko Cianfarani Over a year ago

Thx DArren for the suggst and @FelixKling for the best suggest. And I not know if I have to remove my answer because this will help to someone.

Collectives™ on Stack Overflow

insert text in html tag using javascript

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related