在DIV中插入HTML标签

Question

我该如何插入像<p>这样的HTML标签来包裹“Search”文本？

<button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button>

因为当页面宽度小于或等于900时，我想隐藏“搜索”文本。因此，它会变成一个放大镜图标。

我已经尝试使用jQuery。

<script type="text/javascript">
jQuery(document).ready(function(){ 
var windowsize = jQuery(window).width();

jQuery(window).resize(function() {
  windowsize = jQuery(window).width();
  if (windowsize < 900) {
    jQuery('#ihf-quicksearch-submit2').html('<i class="glyphicon glyphicon-search fa fa-search"></i>');
  } if (windowsize >900) {
    jQuery('#ihf-quicksearch-submit2').html(' Search ');
}
});
});
</script>

jQuery可以更改“搜索”为放大镜图标，但当页面仍在加载时它仍然显示“搜索”文本，在移动版本上看起来不好。因此，我想在“搜索”之前加一个HTML标签，这样我就可以使用@media CSS从CSS中“display:none;”它。请注意：我不能手动插入

，因为我无法找到我正在使用的插件中的代码。有什么想法吗？

- Mark Lozano

Answer 1

非常简单 - 通过ID获取按钮的HTML，然后将其作为字符串修改，并将其存储回按钮的HTML中。

var innerHTML = $('#ihf-quicksearch-submit2').html();
innerHTML = '<p>' + innerHTML + '</p>';
$('#ihf-quicksearch-submit2').html(innerHTML);

Demo Here

- Tricky12

---

非常感谢您的帮助！我现在解决了我的问题，我将您的答案与“Jeff Puckett II”的答案结合起来。你们太棒了！ :) - Mark Lozano

@MarkLozano 没问题，很高兴能帮忙！ - Tricky12

Answer 2

您可以将它们都放在那里，根据媒体查询隐藏它们：

<script   src="http://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button>

<style>
@media screen and (max-width:900px) {
   .search-text {
  display: none;
   }
   #ihf-quicksearch-submit2 {
  opacity: 0;
   }
}
@media screen and (min-width:900px) {
   .search-icon {
  display: none;
   }
}
</style>

<script>
$("#ihf-quicksearch-submit2").html('<i class="glyphicon glyphicon-search fa fa-search search-icon"></i><span class="search-text">Search</span>').css( "opacity", "1" );
</script>

- Jeff Puckett

---

是的，我已经考虑过了，并且我想这样做， 但我找不到插件上具体的代码行。 这就是为什么我无法添加任何HTML标签/类，以便在css上调用。这就是为什么我希望“搜索”文本能够用"< p>"或"< span>"包裹起来。 - Mark Lozano

我已经更新了我的答案，只需找到该元素并替换其内容即可。 - Jeff Puckett

在考虑到您等待页面加载直到jQuery触发后，我进行了另一个更新：您可以使用不透明度隐藏文本，然后在其加载时使用jQuery重置它。 - Jeff Puckett

非常感谢您的帮助！我现在解决了我的问题，尽管我仍然需要添加“Tricky12”的答案。我结合了你们的回答。你们太棒了！ :) - Mark Lozano

Answer 3

这里是我的问题的答案。以防有人遇到和我一样的问题。我结合了“Tricky12”和“Jeff Puckett II”的答案-感谢他们。

<script type="text/javascript">
jQuery(document).ready(function(){ 
    var innerHTML = jQuery('#ihf-quicksearch-submit2').html();
    innerHTML = '<i class="glyphicon glyphicon-search fa fa-search search-icon"></i><span class="search-text">' + innerHTML + '</span>';
    jQuery('#ihf-quicksearch-submit2').html(innerHTML);
});
</script>


<style>
@media screen and (max-width:900px) {
.search-text {
display: none;
}
}
@media screen and (min-width:900px) {
.search-icon {
display: none;
}
}
</style>

- Mark Lozano

Answer 4

如果此div有其他子元素，而您不需要全部清除它们，则可以在JavaScript中使用此方法。

var CodeInsideDiv = document.getElementById("samplediv")
var injection = "<p>sample text</p>"
CodeInsideDiv.innerHTML = injection + CodeInsideDiv.innerHTML

在 HTML 中会发生这种情况

<div id="samplediv">

<p>sample text<p> #<<<--Magic inserted this  here#

<p>SAMPLE TEXT</p>
<div id="nested-div">....</div>   
</div>

- user10230413