How to create HTML element for JavaScript and not for HTML

Question

I have this simplified code:

const chancesData = ["facebook","twitter","google"];
        let inputsArr = [];
        const inputsArrFill = chancesData.map((cur, index) => {
          const input = (document.createElement("input").value =
            chancesData[index]);
          inputsArr.push(input); //I want the pushed value to be something like this "<input value"facebook">"
          return inputsArr;
          //so the returned array (should) be something like this: 
          //["<input value"facebook">","<input value"twitter">","<input value"google">"]
        });
        console.dir(inputsArrFill);

as you can see if you opened this coed in your console, the returned array looks like this:

['facebook', 'twiiter', 'google']

I want it to look like this:

['<input value="facebook">','<input value="twitter">','<input value="google">']

CertainPerformance · Accepted Answer · 2020-02-20 12:22:41Z

4

You can use setAttribute to put the value into the HTML markup, then retrieve it with outerHTML:

const chancesData = ["facebook", "twitter", "google"];
const inputsArrFill = chancesData.map(str => {
  const input = document.createElement("input");
  input.setAttribute('value', str);
  return input.outerHTML;
});
console.dir(inputsArrFill);

But it'd be easier to use ordinary string concatenation:

const chancesData = ["facebook", "twitter", "google"];
const inputsArrFill = chancesData.map(str => `<input value="${str}">`);
console.dir(inputsArrFill);

answered Feb 20, 2020 at 12:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle Tech Over a year ago

Why you're using setAttribute instead of .value ?

CertainPerformance Over a year ago

Because just setting the .value won't be reflected in the HTML markup which .outerHTML retrieves (just like typing into an input field doesn't change the HTML markup - it only changes the state of the element)

C3roe · Accepted Answer · 2020-02-20 12:24:20Z

3

The result of an assignment expression, is the assigned value. With

const input = (document.createElement("input").value =
        chancesData[index]);

you did not store a reference to the created HTML element into your variable, you stored the assigned value, chancesData[index].

You need to do these two things in separate steps.

const chancesData = ["facebook","twitter","google"];
        let inputsArr = [];
        const inputsArrFill = chancesData.map((cur, index) => {
          const input = document.createElement("input");
          input.value = chancesData[index];           
            
          inputsArr.push(input); //I want the pushed value to be something like this "<input value"facebook">"
          return inputsArr;
          //so the returned array (should) be something like this: 
          //["<input value"facebook">","<input value"twitter">","<input value"google">"]
        });
        console.dir(inputsArrFill);

But if you really want <input value="facebook"> as a result, then you will probably have to push that in string form to begin with. You have little control over how an HTML element object gets displayed by the console.

answered Feb 20, 2020 at 12:24

C3roe

97.8k15 gold badges100 silver badges172 bronze badges

1 Comment

Kyle Tech Over a year ago

Thanks a lot "The result of an assignment expression, is the assigned value."

Shiv Patne · Accepted Answer · 2020-02-20 12:33:46Z

1

Please refer below code.

(function createHTMlString() {
  const chancesData = ["facebook", "twitter", "google"];
  var outputObj = []
  for (var i = 0; i < chancesData.length; i++) {
  var inputTag = document.createElement("INPUT");
    inputTag.setAttribute("value", chancesData[i]);    
    outputObj.push(inputTag);
  }
  console.log(outputObj)
})();

edited Feb 20, 2020 at 12:33

answered Feb 20, 2020 at 12:27

Shiv Patne

5433 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to create HTML element for JavaScript and not for HTML

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related