How to change HTML Object element data attribute value in javascript

Question

How do you change HTML Object element data attribute value in JavaScript   Here is what i am trying    lt object type  text html  id  htmlFrame  style  border  none   standby  loading  width  100   gt  lt  object gt    var element   document getElementById  htmlFrame     element setAttribute  data    http   www google com

User · Accepted Answer

and in jquery      element   attr  some attribute   some attributes value     i e     a   attr  href   http   www stackoverflow com

User · Answer

In JavaScript  you can assign values to data attributes through Element dataset   For example   avatar dataset id   12345    Reference  https   developer mozilla org en docs Web API HTMLElement dataset

User · Answer

The behavior of host objects  lt object gt  is due to ECMA262 implementation dependent and set attribute by setAttribute   method may fail   I see two solutions    soft  element data    http   www google com   hard  remove object from DOM tree and create new one with changed data attribute

User · Answer

document getElementById  PdfContentArea   setAttribute  data   path     OR  var objectEl   document getElementById  PdfContentArea    objectEl outerHTML   objectEl outerHTML replace  data            data      path

User · Answer

The following code works if you use jquery      object    replaceWith   lt object data  http   www google com  gt  lt  object gt

User · Answer

This works    lt html gt   lt head gt  lt  head gt   lt body gt    lt object type  text html  id  htmlFrame  style  border  none   standby  loading  width  100   gt  lt  object gt     lt script type  text javascript  gt    var element   document getElementById  htmlFrame       element setAttribute  data    attributeValue      lt  script gt    lt  body gt   lt  html gt    If you put this in a file  open in it a web browser  the javascript will execute and and the  data  attribute   value will be added to the object element   Note   If you simply look at the HTML source  you wil NOT see the attribute  This is because the browser is showing you the static source sent by the webserver  NOT the dynamically rendered DOM  To inspect the DOM  use a tool like Firebug  This will show you what DOM the browser has rendered  and you will be able to see the added attribute   Using Firefox   Firebug or Google Chrome  you can right click on a part of a page and do  Inspect Element   This will bring up a view of the rendered DOM

[javascript] How to change HTML Object element data attribute value in javascript

Examples related to javascript

Examples related to html

Examples related to object