Question

我有一个简单的按钮：

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

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

<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

使用element.outerHTML='NEW HTML'

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

要同时替换p元素，请使用elem.parentElement.outerHTML =＆gt; parentElement将返回所有者节点的父节点..

试试这个：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

首先 - 您的代码无效：代码以funtion sortObj(column) { return function(x,y) { if(x[column] > y[column]) { return 1; } elseif(x[column] < y[column]){return -1;} else{return 0;} } } array.sort(sortObj(value));开头，但以<button>结尾。

要隐藏初始搜索</a>，您可以将其放在.box标记中，并将其<script>属性设置为无法识别（随机文本）。单击按钮后，使用此模板内部html并将其替换为您的代码。

此外，我已通过type函数来获取您点击的元素，因此您可以拥有多个相同的目标元素。

this

function search(el) {
  $(el)
    .parents()
    .eq(1)
    .html($('#box-tpl').html())
  ;
}

Answer 3

你可以使用onclick

$('#id').on('click', function(e){

        $('#id').replaceWith('<input type="text"  name="q" size="25"  id="newelement" value=""/>');


    });

如果你想在onclick事件的输入字段中使用光标

        $("newelement").focus();

Answer 4

试试这个：

function search(){
    var button = document.getElementsByClassName('btn btn-lg btn-success btn-parks');
    var button0 = button[0];

    button0.outerHTML = ('<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 5

使用jQuery的hide（）和show（）函数：

$('button').click(function(){
    $('.button').hide();
    $('.box').show();
});

$('button').click(function(){
	$('.button').hide();
	$('.box').show();
});

.box{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="button">
    <button class="btn btn-lg btn-success btn-parks" onclick="search()">Get started today</button>
</p>
<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>

jsFiddle with Bootstrap styles

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

5 个答案: