Changing the innerHTML of an HTML object with javascript

Question

I am loading an external page into an HTML object:

var object = document.createElement('object')
object.data = 'myPage.html'
$("#myDiv").html(object)

Now I want to modify the source of object. But I can't figure out how to use jQuery to access any of the elements of myPage.html. For example:

$("#myPageDiv").css('background-color', '#000');

has no effect. How can I modify the elements within the injected HTML object?

Does this answer your question? [jQuery CSS() for dynamically created elements](https://stackoverflow.com/questions/3717257/jquery-css-for-dynamically-created-elements) — Majid Ghafoorzade, Jan 05 '21 at 14:39
Use a regular `iframe` element instead of `object` (the result is the same, except you'll have better access to your external document, providing it comes from the same domain as the main page). — Teemu, Jan 05 '21 at 14:39
@Teemu I would use an iframe but I am making a chrome extension and it seems to have some funny behavior when using iframes — rhombidodecahedron, Jan 05 '21 at 14:51
Maybe you should ask another question about that "_funny behavior_" ..? — Teemu, Jan 05 '21 at 15:39

score 1 · Answer 1 · answered Jan 05 '21 at 14:40

1

The innerHTML of an object is fallback content.

It is to be displayed if the external resource the object is loading isn't supported.

Assigning an HTML document's URL to data is effectively using the object as an <iframe>. You should probably use an iframe instead as they have been consistently supported among browsers for much longer.

Once you recognise you are dealing with a frame, you can find plenty of information on how to access the content.

answered Jan 05 '21 at 14:40

Quentin

914,110
126
1,211
1,335

I would use an iframe but I am making a chrome extension and it seems to have some funny behavior when using iframes – rhombidodecahedron Jan 05 '21 at 14:52

WiatroBosy · Answer 2 · 2021-01-05T15:15:19.403

0

You ask " how to use jQuery to access any of the elements of myPage.html"

var object = document.createElement('object')
object.d = '<div id="x">XXX</div>'
$("#my").html(object.d);
$('#x').text("<b>Some</b> new text.");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my">ddd</div>

Try this

var object = document.createElement('object')
object.d = '<div id="x">XXX</div>'
$("#my").html(object.d);
$('#x').text("<b>Some</b> new text.");

edited Jan 05 '21 at 15:15

answered Jan 05 '21 at 14:46

WiatroBosy

1,076
1
6
17

Sorry but this doesn't seem to work, and I am not really sure how it is different from the example I gave – rhombidodecahedron Jan 05 '21 at 14:51

Ken Lee · Answer 3 · 2021-01-05T15:24:34.360

The Jquery's load method and css method should be able to do the trick.

Hence, please try this (for demonstration purpose):

HTML (e.g. main.html)

  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

<input type=button onclick="javascript:step1();" value="(Step 1) Load HTML">

<div id=myDiv></div>


<input type=button onclick="javascript:step2();" value="(Step 2) Change color">


<script>

function step1()
{
$("#myDiv").load('myPage.html');
}

function step2()
{
$("#myPageDiv").css('background-color', '#000');

}

</script>

and for the myPage.html

This is a test
<br>
<div id=myPageDiv>NEED TO CHANGE BACKGROUND COLOR</div>

You may see a fully working HTML here:

http://www.createchhk.com/so_Jan05.html

Changing the innerHTML of an HTML object with javascript

3 Answers3