I'm working on a page with jquery. I want to change a text in a html dom. But when I'm trying to do this its removing entire html code under the dom. You can check the jsfiddle here:

/

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 Edit Profile text. I don't want to remove my buttons. Whats wrong with my code?

I know I have inserted some div into my h1, It is intentionally. I want to know if there are any solutions to this type of situation? suppose I create a

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

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

I'm working on a page with jquery. I want to change a text in a html dom. But when I'm trying to do this its removing entire html code under the dom. You can check the jsfiddle here:

http://jsfiddle/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 Edit Profile text. I don't want to remove my buttons. Whats wrong with my code?

I know I have inserted some div into my h1, It is intentionally. I want to know if there are any solutions to this type of situation? suppose I create a

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

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

• javascript
• jquery
• html
• css

• So move your divs outside of your h1: jsfiddle/j08691/msxpwr5p/1 – j08691 Commented Aug 20, 2014 at 13:29
• yes, because you are using the h1 as container, which you shouldn't do. – Rumplin Commented Aug 20, 2014 at 13:29
• 8 Never ever put a div inside a h1. – Sergiu Paraschiv Commented Aug 20, 2014 at 13:30
• I have edited my question again. please have a look.. – user3957766 Commented Aug 20, 2014 at 13:37

7 Answers 7

try this

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

Check the output at jsFiddle

Close your h1 in the correct 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 on almost the whole div.

JSFIDDLE

Your changing the text of the h1 tag with JQuery, in your html your tag is enclosing 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>

What you want is to close the header 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>

You can try this (without any change in your HTML codes)

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

JSFiddle

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>

This is doable via javascript would be possible with your current markup, but I'd remend simply closing your H1 tag and adjusting your styling on the buttons 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 it 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/msxpwr5p/3/

This is definitely a fragile solution though, if your markup changes this could break easily.

Even though it has been said in the ment section, I'll keep in mind that you can't change the place 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 a reference on you element while removing them from the DOM. When using .text(), it empty the targeted DOM element and change its text. So right after you change the text, you can append the detached elements.

Fiddle : http://jsfiddle/msxpwr5p/4/