document.getElementById("test").innerHTML += " hello two";

That works for me. But only for the first 'test' division on my page. I want to add the innerHTML inside where I want it.

so I have a button and when I click it something like this must happen:

$this.find("#test").innerHTML += " hello two";

But this second code won't work.

What am I doing wrong?

 document.getElementById("test").innerHTML += " hello two";

That works for me. But only for the first 'test' division on my page. I want to add the innerHTML inside where I want it.

so I have a button and when I click it something like this must happen:

$this.find("#test").innerHTML += " hello two";

But this second code won't work.

What am I doing wrong?

• javascript
• jquery
• html

• 2 jQuery has .html, .append() method. You don't need .find() for ID selector, use $('#test').append(' hello two') – Tushar Commented Feb 20, 2016 at 17:15
• Use append() method to by pointing #test ID $('#test').append('hello two'); – Iqbal Pasha Commented Feb 20, 2016 at 17:22
• 2 IDs must be unique!!!!!!!! – Oriol Commented Feb 20, 2016 at 17:28

3 Answers 3

Because .find() doesn't return the element, but the jQuery object (which doesn't have an innerHTML property). If you're using jQuery, a better method would be to rely on .append():

$("#test").append(" hello two");

Here is a JSFiddle which demonstrates the .append() solution, as well as doing a console.log() of your find() code so you can open it in your browser's developer console and examine the object for yourself.

jQuery selections return jQuery objects, not DOM elements

Using jQuery's .get() method allows you to retrieve the DOM elements matched by the jQuery object, which allows you to use DOM properties like .innerHTML.

But jQuery offers its own methods (such as .text() and .append()) for modifying the text value of an element. Let's look at some examples:

$(function () {
  
  // Following the OP's pattern of using `.find()`...
  // you have to use `.get()` to retrieve the DOM element from the jQuery Object.
  $(document).find('#test').get(0).innerHTML += ' hello two';
  
  // Or simply use the jQuery selector to directly select the target element.
  // You may also just use square bracket notation to retrieve the DOM element.
  $('#test')[0].innerHTML += ' hello three';
  
  // jQuery's `.text()` method may also be used to get & set the text:
  // Inefficiently, as seen here.
  $('#test').text($('#test').text() + ' hello four');
  
  // Or with a function that returns a new string value to set.
  $('#test').text(function (i, str) { return str + ' hello five' });
  
  // Or with fancy pants ES6 arrow function notation.
  $('#test').text((i, str) => str + ' hello six');
  
  // But using jQuery's `.append()` method is best for this scenario.
  $('#test').append(' hello seven');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">Hello world</p>

$this.find("#test").innerHTML += " hello two"; should be $(this).find("#test").append(" hello two"); if ever need to use that. .innerHTML is not a jquery method

$("button").click(function() {
    $("the place you want").append($("#test").text());
});

This $("the place you want") can be a tagname e.g $("p") or id e.g $("#first_p") or name e.g $("[name='name_of_p']") attribute of the element

$(document).ready(function(){
    $("button").click(function() {
        $("p").append(" hello two");
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button>Click me</button>
<p>Good morning,</p>