How do I get jQuery's .load() to exclude div elements from the result?

Question

When using JQuery's .load to select a div from another page like

<div id="hello"> Hello </div>

How do i get it to exclude the div tags from the result?

So it just returns "Hello".

To be more specific what I'm actually doing is getting a div with some html in it from a web page and placing it in another.

<script>
    $(document).ready(function(){
        $('.backup').on('click',function(e){
            var id = $(this).attr('id');
            var file_name = "../ajax/"+{{ json_encode($data[0]) }} + " #" + id + ".text";
            console.log(file_name);
            //this is .load it takes in a string with a URL and a DOM element as a string.
            // it will take the dom element found at the URL and place it in .page_text
            $(".page_text").load(file_name);
        });
    });
</script>

Anyway, use `$.get` and just get the text like `$(data).find('#hello').text()` — adeneo, Oct 25 '16 at 18:34
@Pekka웃 before editing it was. now it's correct syntax in question — Mahi, Oct 25 '16 at 18:54

score 1 · Answer 1 · answered Oct 25 '16 at 18:34

1

$("#hello").text() gives the content of div. Just use text method.

answered Oct 25 '16 at 18:34

selami

2,478
1
21
25

yes but the syntax for .load is something like `$('#element').load("url_to_look_in #id_you_want_to_get");` so i'm not really sure how use the .text method. – IdecEddy Oct 25 '16 at 18:51
You changed the question dramatically. This question helps you. Load from file http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div – selami Oct 25 '16 at 18:57

Pekka · Answer 2 · 2016-10-25T19:01:19.757

1

There may be no real way to do this.

.load() will load the resource and insert it into the DOM. The method has no parameter to exclude certain elements.

If you absolutely can't have certain elements entering your page's DOM, you would probably have to parse the resource you're loading on server side and remove the elements there.

If, however, you can live with the elements getting loaded, you just don't want them to be visible, you could do one of the following:

Load everything and then delete all the elements you don't want
Load everything and use CSS to hide all the elements you don't want. So for example, if you load everything into a <div> named mystuff, you can use CSS to hide divs:
```
#mystuff div { display: none; }
```

edited Oct 25 '16 at 19:01

answered Oct 25 '16 at 18:54

Pekka

442,112
142
972
1,088

Is there something like `.load` but where I can just set it to a variable the use .text on that element and push it into my textbox? – IdecEddy Oct 25 '16 at 19:05
Not sure what you mean - you mean load a resource as text? That should be possible with what the others suggest (load it and then do a `.text()`) – Pekka Oct 25 '16 at 19:07

score 0 · Answer 3 · edited Oct 25 '16 at 19:52

0

$('#hello').text('Hello')

That should do it for you.

edited Oct 25 '16 at 19:52

Nisse Engström

4,738
23
27
42

answered Oct 25 '16 at 18:35

Jeff

283
1
8

score 0 · Answer 4 · answered Oct 25 '16 at 18:37

0

If I understand correctly you are looking for the content of the div.

Using only javascript

var getDiv = document.getElementById('hello').innerHTML //Hello

answered Oct 25 '16 at 18:37

brk

48,835
10
56
78

score 0 · Answer 5 · answered Oct 25 '16 at 18:37

0

If you want to select a div

$("#hello")->this gives div with an id of hello

if you want to get the content of it

$("#hello").text() will return hello

answered Oct 25 '16 at 18:37

Geeky

7,420
2
24
50

score 0 · Answer 6 · answered Oct 25 '16 at 18:47

0

Using Jquery as your mention:

$('hello').text()

or using Javascript:

document.getElementById('hello').innerHTML

this will call only text inside the element with hello ID

answered Oct 25 '16 at 18:47

Kamarul Anuar

312
4
16

Abk · Answer 7 · 2016-10-25T19:00:07.377

0

This will return text and the html content

$('#hello').html()

This will return the text content of the div alone

$('#hello').text()

Example

$('.a').click(function(){

  alert($('.html').html());
});
  
$('.b').click(function(){

  alert($('.text').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='a'> Get HTML </button>

<button class='b'> Get Text</button>
  
<div class='html'> 
<p> This is the HTML plus Content </p>
 </div>
<div class='text'>
  <p> This is the Text Content only </p>
  </div>

edited Oct 25 '16 at 19:00

answered Oct 25 '16 at 18:58

Abk

2,137
1
23
33

Why does everyone in this question think the OP wants the text content of the div? They just want to exclude certain elements, no? – Pekka Oct 25 '16 at 18:59

How do I get jQuery's .load() to exclude div elements from the result?

7 Answers7