javascript - HTML Javascript - 用搜索字段替换按钮 onclick

Question

我有一个简单的按钮:

<p><button class="btn btn-lg btn-success btn-parks"
onclick="search()">Get started today</a></p>

点击后我想用搜索字段完全替换上面的代码。我想知道最好的方法是将上面的代码替换为使用 JavaScript 或 JQuery 的搜索字段 onclick 的代码。

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

Answer 1

Use element.outerHTML='NEW HTML'

要获取当前元素，请将 this 作为参数传递

要替换 p 元素，请使用 elem.parentElement.outerHTML => parentElement 将返回所有者节点的父节点。

试试这个:

var html = '<div class="box">\
  <div class="container-1">\
      <span class="icon"><i class="fa fa-search"></i></span>\
      <input type="search" id="search" placeholder="Search..." />\
  </div>\
</div>';

function search(elem) {
  elem.outerHTML = html;
}

<p>
  <button class="btn btn-lg btn-success btn-parks" onclick="search(this)">Get started today</button>
</p>