How to createElement tag with html attributes in Javascript

Question

I inserted an input tag after a certain element of my html source code, it seems to work, but what I need is to be able to add attributes (type, class, id etc ..) to the input tag I created.

Here is what I did in Js

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var inputCheckBox = document.createElement("input");
inputCheckBox.innerHTML = "test";
var div = document.getElementById("plugin_delete_me_shortcode_password");
insertAfter(div, inputCheckBox);

Result html

<input type="password" autocomplete="off" autofocus="autofocus" id="plugin_delete_me_shortcode_password" name="plugin_delete_me_shortcode_password">

<input>test</input> <!-- i got this as a new item -->

Now I have two problems, 1) in general the input tags don't seem to have a closing tag, but they are one line. 2) I have no idea how I could add attributes to the tag via Js.

This is what I am trying to achieve Kindly, can someone show me the right way? I have searched some references but have not been able to find a solution. I appreciate any help, thanks.

<input type="password" autocomplete="off" autofocus="autofocus" id="plugin_delete_me_shortcode_password" name="plugin_delete_me_shortcode_password">

<input type="checkbox" class="my_class" id="my_id" onclick="my_function('example_function')"/>

k-devs · Accepted Answer · 2022-08-04 16:34:30Z

2

You can just assign the a value to the attribute after creating the element like bellow:

var inputCheckBox = document.createElement("input");

inputCheckBox.type = 'checkbox';
inputCheckBox.id = 'the-id';
inputCheckBox.classList.add('the-class');

// for styling
inputCheckBox.style.color = 'green';

// or you can use the set attribute method

inputCheckBox.setAttribute('type', 'checkbox');
console.log(inputCheckBox);

edited Aug 4, 2022 at 16:34

answered Aug 4, 2022 at 16:21

k-devs

1466 bronze badges

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

Comments

Tatul Mkrtchyan · Accepted Answer · 2022-08-04 16:17:55Z

0

Try to call setAttribute on inputCheckBox like`

inputCheckBox.type = 'password';    
inputCheckBox.setAttribute('autocomplete', 'off');
...
inputCheckBox.name = "plugin_delete_me_shortcode_password";

answered Aug 4, 2022 at 16:17

Tatul Mkrtchyan

3714 silver badges9 bronze badges

Comments

ThomasG2201 · Accepted Answer · 2022-08-04 16:29:38Z

0

You can use DOM for Vanilla JavaScript

const element = createElement("div");
div.setAttribute("data-custom-attribute", "custom-value");

If you want to use JQuery:

$('<div></div>').attr({
  id: "my-id"
})

More on this on the official documentation

answered Aug 4, 2022 at 16:29

ThomasG2201

91713 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to createElement tag with html attributes in Javascript

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