JQuery Text Removing All HTML

Question

I am working on a page with jquery. I want to change the text in html dom. But when I try to do this, it removes all the html code under dom. Here you can check jsfiddle:

http://jsfiddle.net/msxpwr5p/

html markup

<div class="container"> <h1 class="page-header">Edit Profile <div class="broadcast"> <button id="button1" class="btn btn-success"><i class="icon-bullhorn"> </i>button1</button> </div> <div class="broadcast"> <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button> </div> </h1> </div> 

Jsfile

 $("#button2").on('click', function(e){ $(".page-header").text("another text"); }); 

I just want to change the text Edit profile . I do not want to delete my buttons. What is wrong with my code?

I know that I inserted several div into my h1 , this is intentional. I want to know if there are any solutions for this kind of situation? suppose i create

 <div id="hello"> Hello <a href=#></a> <button>text</button> <div> 

In this situation, if I want to change the text "hello". What should I do?

Answer 1

try it

 $("#button2").on('click', function(e){ $('h1').contents().first()[0].textContent='another Title'; }); 

Check output on jsFiddle

Answer 2

Close h1 in the right place:

 <div class="container"> <h1 class="page-header">Edit Profile</h1> <div class="broadcast"> <button id="createchannel" class="btn btn-success"><i class="icon-bullhorn"></i>Create Channel</button> </div> <div class="broadcast"> <button id="listchannel" class="btn btn-success"><i class="icon-bullhorn"></i>List Channel</button> </div> </div> 

Your h1 was open to almost the entire div.

JSFIDDLE

Answer 3

By changing the text of the h1 tag using jQuery, in your html your tag will cover everything

 <div class="container"> *Starts here*<h1 class="page-header">Edit Profile <div class="broadcast"> <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button> </div> <div class="broadcast"> <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button> </div> </h1>*ends here* </div> 

You want to close the title after Edit Profile , so change it to this:

 <div class="container"> <h1 class="page-header">Edit Profile</h1> <div class="broadcast"> <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button> </div> <div class="broadcast"> <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button> </div> </div> 

Answer 4

You can try this (without any changes to your HTML codes)

 $("#createchannel").on('click', function(e){ var text = $(".page-header")[0].firstChild; text.textContent = "another text"; }); 

Jsfiddle

Answer 5

Try something like this:

 <div class="container"> <h1 class="page-header"><span id='under_header'>Edit Profile<span> <div class="broadcast"> <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button> </div> <div class="broadcast"> <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button> </div> </h1> </div> 

Answer 6

This can be done using javascript with your current markup, but I would recommend just closing your H1 tag and customizing your button style accordingly.

 <div class="container"> <h1 class="page-header">Edit Profile</h1> <div class="broadcast"> <button id="button1" class="btn btn-success"><i class="icon-bullhorn"></i>button1</button> </div> <div class="broadcast"> <button id="button2" class="btn btn-success"><i class="icon-bullhorn"></i>button2</button> </div> </div> 

You can do this with your current markup using this script:

 $("#createchannel").on('click', function(e){ $(".page-header")[0].firstChild.data = "Create Channel"; }); 

Here's the fiddle: http://jsfiddle.net/msxpwr5p/3/

This is definitely a fragile solution, although if your layout changes, it can easily break.

Answer 7

Despite the fact that this was said in the comments section, I will keep in mind that you cannot change the position of the closing tag. You can detach your element from the DOM before changing the text:

 $("#createchannel").on('click', function(e){ var $child = $(".page-header").children().detach(); $(".page-header").text("Create Channel").append($child); }); 

Detaching them will allow you to keep the link to the element by deleting them from the DOM. When using .text() it clears the target DOM element and changes its text. Therefore, immediately after changing the text, you can add individual elements.

Fiddle: http://jsfiddle.net/msxpwr5p/4/