jQuery .attr() does not set in HTML after to set value and remove this attribute before

Question

In my script, I need all the time on form items set attributes in HTML to save previous data and evaluate the next data before doing an ajax request.

Concerning data-next-* attributes, there are removed all the time after the script is done like this :

function actualizeTmpDataAndSpinner (){
       //Notice : "Value" is position value
       var a_dataValueKeys = [ "value", "is-condition", "condition-type", "condition-selector" ];

       for( var k=0 ; k < a_dataValueKeys.length; k++ ){
           $("*[data-previous-" + a_dataValueKeys[k] + "]").removeAttr( "data-previous-" + a_dataValueKeys[k] );
           $("*[data-next-" + a_dataValueKeys[k] + "]").each( function () {
           var dataNextValue = $(this).attr("data-next-" + a_dataValueKeys[k] );
           $(this).attr("data-" + a_dataValueKeys[k], dataNextValue );
       });
       $("*[data-next-" + a_dataValueKeys[k] + "]").removeAttr("data-next-" + a_dataValueKeys[k] );
   }
   $(".h4a-spinner-wrapper").remove();
}

For some reasons, after data-next-* was setup with values and removed, at a moment this following code line set attributes only in the DOM, and not in the HTML anymore :

function resetConditionForNext( $currentfieldConditionWrapper ) {
    $currentfieldConditionWrapper.attr('data-next-is-condition', "false" );
    $currentfieldConditionWrapper.attr('data-next-condition-type', "" );
    $currentfieldConditionWrapper.attr('data-next-condition-selector', "" );
}

Output

In console

HTML Inspector

Why data-next-is-condition, data-next-condition-type and data-next-condition-selector are not visible in the HTML inspector ?

Someone has got an explanation ?

Note: In JavaScript try to avoid using `$` in variable names. It's allowed, but it's also highly non-standard. JavaScript is not PHP or Perl. — tadman, Jul 17 '19 at 18:52
if I write `console.dir( $currentfieldConditionWrapper )`, I can see attributes but not in the HTML code Inspector. — J.BizMai, Jul 17 '19 at 18:55
The HTML never changes. That's rendered out by the server and sent to the browser once and once only. The DOM is the current state of the document and will change. — tadman, Jul 17 '19 at 18:57
If by "HTML" you mean "View Source" then no, never. The HTML is loaded and immediately converted into what's represented as the DOM, but changes after that are not reflected in the source. If you want to rip the current state of the page *as* HTML you can do that using `innerHTML` on the `` element. — tadman, Jul 17 '19 at 18:59
What means the HTML never changes ? If I add an attribute on a HTML tag, the HTML changes... — J.BizMai, Jul 17 '19 at 19:00
Where are you adding an attribute? By editing the HTML source file? If so, sure, you can change it there, but you must reload the page for that change to take effect. What I mean is for any given page, the HTML source does not change unless you click a link, loading another page, or reload the page. — tadman, Jul 17 '19 at 19:01
I´m using a classical jquery script with `$(document).ready( function() {...` to modify the DOM and all the time, that appears in the "View Source" except in this case, when I can see it only with `console.dir()` — J.BizMai, Jul 17 '19 at 19:04
The JavaScript will show up in the source, sure. I think you're confusing what the HTML "View Source" view does with what the DOM is. The source is specifically, and only *what the browser loaded to render the page*, not what the browser is currently showing. — tadman, Jul 17 '19 at 19:06
I modified my question with two screenshots to be clearer. About DOM and HTML Vocabulary. I´m based on [this answer](https://stackoverflow.com/questions/5874652/prop-vs-attr#answer-5875043) — J.BizMai, Jul 17 '19 at 19:43
Those are two different views of the same thing, both the DOM. — tadman, Jul 17 '19 at 19:44
That is how it works. And you really should be using data() for data attributes. — epascarello, Jul 17 '19 at 19:45
@tadman, Yes and all the time these two views are the same, if I change attributes, you can see it in console view and HTML view. Why for this case it´s different ? — J.BizMai, Jul 17 '19 at 19:49
@epascarello, all the time, it does not work like this because in this case, they are different. Each time I do a change with `.attr()` I should see the same result in both. what do you mean by `data()`, I´m using the prefix `data-` to make a difference with common attributes, it´s not correct ? — J.BizMai, Jul 17 '19 at 19:53
`data-` implies [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) which jquery updates with [`data()`](https://api.jquery.com/jQuery.data/) — epascarello, Jul 17 '19 at 20:31

score 1 · Accepted Answer · answered Jul 17 '19 at 20:10

I found what happened...

As the script removes data-next-* at the end, in order to check new attributes, I tried to use alert("stop"); like this :

if( !$conditionCheckbox.is(":checked") ){
    resetConditionForNext( $currentConditionWrapper );
    console.dir( $currentConditionWrapper );
    alert("stop");
    break;
}

But alert("stop"); is run before doing the change in HTML Inspector.

If I write an unknown javascript word like exit; instead of alert("stop"); like this :

if( !$conditionCheckbox.is(":checked") ){
    resetConditionForNext( $currentConditionWrapper );
    console.dir( $currentConditionWrapper );
    exit;
    break;
}

The script is locked and the HTML Inspector is updated :

jQuery .attr() does not set in HTML after to set value and remove this attribute before

1 Answers1