html stored in javascript variable,how to Update that html inside javascript variable

Question

Here,

var data = '
<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 100%;">    
    <tbody>     
        <tr>
            <td>
                <textarea cols="80" id="editor" name="editor" rows="10">This is my textarea to be replaced with Editor.</textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">&copy; 2016 Vishmay Shah</td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>'

I want to update the editor's id to editor1 using jquery within data variable

I can access it using

   $('#editor', Data)[0].id=$('#editor', Data)[0].id+'1';

but I want to save updated HTML in the data variable back.

UPDATE

There will be multiple editors with the same id editor.

Actually, I want to make it unique by appending index.

That is editor0,editor1,..., replace function will replace all editor, so it will not help

  var editors = $('#editor', Data);
    for (var i = 0; i < editors.length; i++) {
        var subeditor = editors[i].id + i;
        editors[i].id = subeditor;
     }

@Zan there may be multiple editor with same id editor, actually i want to make it unique by appending index-> that is editor0,editor1,..., replace function will replace all — VISHMAY
– VISHMAY, Commented Mar 8, 2016 at 6:36
"there may be multiple editor with same id editor" id of element should be unique in document. See developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id — guest271314
– guest271314, Commented Mar 8, 2016 at 6:52
@ guest271314 thats why i am replacing in var before loading in html — VISHMAY
– VISHMAY, Commented Mar 8, 2016 at 6:56
@VISHMAY "thats why i am replacing" You could use same className and replacement would not be necessary ? Access element using bracket notation on DOM element element[0] , element[1] or jQuery .eq(); e.g; $(".element").eq(0), $(".element").eq(1) to return same results as mutliple ids $("#element0") , $("#element1")? — guest271314
– guest271314, Commented Mar 8, 2016 at 6:56

Norlihazmey Ghazali · Accepted Answer · 2016-03-08 06:40:48Z

If you have more than one with the same ID name, perhaps you need to find it by attribute and replace the old ID name with index like so :

var Data = '<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 100%;">    <tbody>     <tr><td><textarea cols="80" id="editor" name="editor" rows="10">This is my textarea to be replaced with Editor.</textarea><textarea cols="80" id="editor" name="editor" rows="10">This is my textarea to be replaced with Editor.</textarea></td>     </tr>       <tr>            <td colspan="2">&copy; 2016 Vishmay Shah</td>       </tr>   </tbody></table><p>&nbsp;</p>';
// this will look the element with ID editor
// and replace element with index
var newElem = $(Data).find('[id="editor"]').attr('id', function(i, old) {
     return old + i;
}).end();
console.log(newElem)

DEMO(inspect element to see the actual ID)

Afsar · Accepted Answer · 2016-03-08 06:36:34Z

0

This will work out:

Data.replace('name="editor"','name="editor1"')

answered Mar 8, 2016 at 6:36

Afsar

3,1242 gold badges27 silver badges35 bronze badges

Comments

guest271314 · Accepted Answer · 2016-03-08 06:44:39Z

0

Updating multiple elements id property can be achieved using :last , .length at .prop(function(name, propertyValue){}) or .attr(function(name, propertyValue){}).

An alternative approach would be to try substituting using same className , e.g.; .editor , for multiple ids beginning with a name and ending in number at multiple elements. Use .length to determine which element currently being processed.

answered Mar 8, 2016 at 6:44

guest271314

1

Collectives™ on Stack Overflow

html stored in javascript variable,how to Update that html inside javascript variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related