javascripthtmlcreateelement

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

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.

Solution 

  • <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>