How to insert a created <input> tag into a created <p> tag with text?-CodePudding

I'm trying to put a created input tag between the text of a created p tag. My method returns [object HTMLInputElement]. I want to create a text field for users to write in.

I've tried

<!DOCTYPE html>
<html>
<body>

<script>
let PTag = document.createElement("p");

let Input = document.createElement("input");

Input.type = "text";

PTag.innerText = "SampleTextOne "   Input   " SampleTextTwo";

document.body.appendChild(PTag);
</script>

</body>
</html>

I'm still new to creating HTML elements and positioning them.

CodePudding user response：

You inserting Html Object as text inside your p tag.

instead of innerText appendChild a created Html element inside a created tag to work correctly.

<!DOCTYPE html>
<html>
<body>

<script>
let PTag = document.createElement("p");

let Input = document.createElement("input");

Input.type = "text";

// PTag.innerText = "SampleTextOne "   Input   " SampleTextTwo";

PTag.appendChild(Input);

document.body.appendChild(PTag);
</script>

</body>
</html>

But it's better to create html elements without javascript like this

<input type="text" placeholder="enter text" />

CodePudding user response：

<body>
<script>
let PTag = document.createElement("p");
let Input = document.createElement("input");

Input.type = "text";

PTag.innerHTML = "SampleTextOne ";
PTag.append(Input);
PTag.innerHTML  = " SampleTextOne";

document.body.appendChild(PTag);
</script>

</body>