如何从模板文字中获取输入值并将其分配给变量？

Question

I have tried to get the class or id attribute of the input field from this template literal and after that, I will like to assign it to a variable so that I can use the add Event Listener method to asset the value of the user's input when they enter letter in the input filed. But I am confused about how to implement this. I will be pleased if someone help can help me out.

// search bar function
const searchBar = () => {
  const createSearchForm = `
    <form action="#" method="get">
      <input type="search" id="search-input" class="search-input" placeholder="Search...">
      <input type="submit" value="&#x1F50D;" id="search-submit" class="search-submit">
    </form>`;
  searchParent.insertAdjacentHTML('afterbegin', createSearchForm)
}
searchBar();

Answer 1

Use DOMParser() :

 const createSearchForm = ` <form action="#" method="get"> <input type="search" id="search-input" class="search-input" placeholder="Search..."> <input type="submit" value="&#x1F50D;" id="search-submit" class="search-submit"> </form>`; var val = new DOMParser().parseFromString(createSearchForm,"text/html").querySelector("input[type='submit']").value; console.log(val);