I have a html fragment similar to this

<div class="form-row">
  <input type="text" id="foo1">
</div>
<div class="form-row">
 <input type="text" id="foo2">
</div>
<div class="form-row">
  <input type="text" id="foo3">
</div>

and I wanted to use cheerio to change the id tag to foobar[1,2,3]

my code is

 var cheerio = require("cheerio");
 var $ = cheerio.load("html as above");

 var inputs = $('input[id]');

 Object.keys(inputs).forEach(function(key,index) {
   if (key == index) {
     console.log(key,inputs[key])
     //#1
 });

at this point (//#1), I wanted to get the value of the id attribute, and according to the docs at I can use the .data method to get and change the attribute in the element, but

inputs[key].data("id")

gives me a "TypeError: undefined is not a function" error

I know that I'm missing something simple, but can't see the wood for the trees and would appreciate some pointers.

thanks

update #1

just when I think I've got a grip on this, it slips from my fingers ..

now, I want to move an element :

I have

<label>xyz<i class="fa fa-list"></i></label>

and I want

<label>xyz</label><i class="fa fa-list"></i>

the code - that doesn't work ;) - is this

var icons = $('label i');

icons.each(function(index,icon) {
  // #2 now that I've got an element what now ?
}

I know that icons.remove() will delete the element(s) but struggling to get them added to the right place.

I have a html fragment similar to this

<div class="form-row">
  <input type="text" id="foo1">
</div>
<div class="form-row">
 <input type="text" id="foo2">
</div>
<div class="form-row">
  <input type="text" id="foo3">
</div>

and I wanted to use cheerio to change the id tag to foobar[1,2,3]

my code is

 var cheerio = require("cheerio");
 var $ = cheerio.load("html as above");

 var inputs = $('input[id]');

 Object.keys(inputs).forEach(function(key,index) {
   if (key == index) {
     console.log(key,inputs[key])
     //#1
 });

at this point (//#1), I wanted to get the value of the id attribute, and according to the docs at https://github./cheeriojs/cheerio I can use the .data method to get and change the attribute in the element, but

inputs[key].data("id")

gives me a "TypeError: undefined is not a function" error

I know that I'm missing something simple, but can't see the wood for the trees and would appreciate some pointers.

thanks

update #1

just when I think I've got a grip on this, it slips from my fingers ..

now, I want to move an element :

I have

<label>xyz<i class="fa fa-list"></i></label>

and I want

<label>xyz</label><i class="fa fa-list"></i>

the code - that doesn't work ;) - is this

var icons = $('label i');

icons.each(function(index,icon) {
  // #2 now that I've got an element what now ?
}

I know that icons.remove() will delete the element(s) but struggling to get them added to the right place.

• javascript
• html-parsing
• cheerio

1 Answer 1

The problem is inputs[key]) will be a dom element reference, which will not have methods like data()

Try to set the attribute value like

var cheerio = require("cheerio");
var $ = cheerio.load('<div class="form-row">\
  <input type="text" id="foo1">\
</div>\
<div class="form-row">\
 <input type="text" id="foo2">\
</div>\
<div class="form-row">\
  <input type="text" id="foo3">\
</div>');

var inputs = $('input[id]');

inputs.attr('id', function(i, id){
    return id.replace('foo', 'foobar')
});

console.log($.html())