element.innerHTML does not give same result as displayed in the source view

Question

I have one situation in which I have the following tag.

<div name="Default" linespacing="22.34pt" style="text-align: center;" $ {TEST}>

and when I do $(element).innerHTML it gives the result as. "

<div name="Default" linespacing="22.34pt" style="text-align: center;" $="" {TEST}="">"

what I want is it should not change $ and {test} to $="" and {test}="" when I get the html element. Is it possible ?

$ {test} is a variable that is later replaced with some value. But what I am getting is $="" and {test} ="" . what I expect is . It should remain intact as it is. — Anoop Singh, Jul 31 '17 at 07:27
This is all per specs :`$` and `{test}` are attributes for the HTML parser, and according to the [html-fragment-serialization-algorithm](https://www.w3.org/TR/html5/single-page.html#html-fragment-serialization-algorithm) (ran by `innerHTML`) "*For each attribute that the element has, append a U+0020 SPACE character, the attribute's serialized name [...] a "=" (U+003D) character, a U+0022 QUOTATION MARK character ("), the attribute's value, [...], and a second U+0022 QUOTATION MARK character (").*" (or ` ` + attrName + `="`+ attrValue + `"`) — Kaiido, Jul 31 '17 at 08:17
Not too much you can do, apart from `fetch(location.href).then(r=>r.text()).then(txt => `[InvokeTheRageOfZA̡͊͠͝LGΌ](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454)`(txt))` — Kaiido, Jul 31 '17 at 08:19
@Kaiido what is this "fetch(location.href).then(r=>r.text()).then(txt => InvokeTheRageOfZA̡͊͠͝LGΌ(txt))" I didn't understand can you please elaborate in javascript it will be helpful... — Anoop Singh, Aug 02 '17 at 05:00

Difster · Answer 1 · 2017-07-31T07:57:08.953

0

You're trying to mix jQuery and JavaScript. Try: $(element).html("<p>Add something</p>") instead. You can't use .innerHTML with jQuery.

I just realized you're trying to use $ {TEST} inside the <div> tag, instead of between the opening and closing tags: <div> $ {TEST} </div>

But let's say you have

Hello World

then you can get the html withvar testHtml = $("#test").html();

Does that make more sense?

edited Jul 31 '17 at 07:57

answered Jul 31 '17 at 06:39

Difster

yeah ok but both giving same result . – Anoop Singh Jul 31 '17 at 07:27
That just means that `{test}` is empty. Is this smarty, yii? Which template engine is it? – Difster Jul 31 '17 at 07:28
No its HTML5 . and its an javascript app not PHP. – Anoop Singh Jul 31 '17 at 07:48
I want the variables inside the tag not in the text . I just want to know is it possible . – Anoop Singh Jul 31 '17 at 08:03
You can do custom attributes inside the tag, sure. But what exactly are you trying to put in there? `${TEST}` is just confusing. – Difster Jul 31 '17 at 08:05
Its a variable like '${Hl540}' later on it will be replaced by some attribute like linespacing="8.5pt" spaceafter="8pt or some thing like that. – Anoop Singh Jul 31 '17 at 08:13
For better HTML compliance, you should be doing that with CSS, not setting those attributes directly in the element. Ideally, you would make css classes with each version of what you need and then use jquery to add, remove classes as needed (even multiple at a time). But if that's going to be a huge variety, then just set the css in the `style` attribute. – Difster Jul 31 '17 at 08:19

1 Answers1