标签: outerhtml

使用Javascript，我希望获取 DOM 元素并仅获取它的tag、class、id等（括号中的内容），但忽略其中的实际文本内容。innerHTML有点像/的反义词textContent。

所以我希望得到这样的 div：

<p id="foo">Ipsum Lorem</p>

到一个字符串中：

<p id="foo"> </p>

我找到了这个功能(虽然,我忘了在哪里):

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
}

但这个功能通过调用outerHTML(my_element)而不是my_element.outerHTML

我希望能够扩展一个javascript DOM元素对象,使其具有outerHTML元素,但如果存在则仍然使用本机元素.我怎么做？

我想这样做的主要原因是因为Firefox本身没有outerHTML方法,但是我仍然希望使用本机实现(如果可用),因为它们已经过彻底测试,我觉得我可以信任它们.

更新:@Raynos建议我不要为outerHTML做上面的事情,而且我应该做一些类似于outerHTML规范的事情.我发现了这个: 我如何在firefox中做OuterHTML？ 并且它没有.cloneNode,这可能会导致FireFox 8.0.1中的错误.
所以,根据@Raynos,我的解决方案是这样的:

if (!("outerHTML" in HTMLElement.prototype)) {
    Object.defineProperty(HTMLElement.prototype, "outerHTML", {
        get: getOuterHTML
    });
}


function getOuterHTML(){
    var parent = this.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(this.cloneNode(true));
    var shtml = el.innerHTML;
    return shtml;
}

这是html代码:

$(".adauga_incasare").click(function(){
       var html = $(".incasari")[0].outerHTML;
       $(html).insertAfter($(".incasari").last());
    });

    $(".del_incasare").click(function(){
         alert("dsdasdasd");
    });

这是javascript代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    			<div class="incasari">
    				<div class="data_incasare_container">
    					<label><b>Data</b></label>
    					<input class ="data_incasare" type="text" id="datepicker">
    					<label class ="data_incasare_hidden">12-06-2014</label>
    				</div>
    				<div class="suma_incasare_container" style="">
    					<label><b>Suma</b></label>
    					<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" alt=""> 
    					<label class ="suma_incasare_hidden">100</label>
    				</div>
    			    <div class="coscos" style="">
    			   	     <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
    			   	     <div style="clear:both;"></div>	
    			   	     <div class ="incasare_action">
    				   	     <input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
    				   	     <a href="javascript:void(0);" class="del_incasare delrow"></a>
    			   	 	 </div>
    			   	 	 <div style="clear:both;"></div>
    			    </div>
    			    <div style="clear:both;"></div>
    		    </div>
    
    		    <div style="clear:both;"></div>	
    			<a href="#" class="adauga_incasare">+ Adauga incasare …

I have this HTML template on a page:

<div id="bid_wrapper_[[bid_id]]_[[template]]">
    <div class="form_item_block" id="bid_wrapper_[[bid_id]]_[[template]]">
        <div id="bid_delete_[[bid_id]]_[[template]]"><img src="/images/icons/cross.png"></div>
        <div id="bid_label_wrapper_[[bid_id]]_[[template]]">Bid #1</div>
        <div><input type="text" name="bid_summary" id="bid_summary_[[bid_id]]_[[template]]"></div>
        <div><input name="bid_price" id="bid_price_[[bid_id]]_[[template]]"></div>
    </div>
</div>

I'm trying to strip out the _[[template]] text, and also replace the [[bid_id]] with a number. I tried this:

var bid_template = document.getElementById('bid_wrapper_[[bid_id]]_[[template]]').cloneNode(true) 
var new_bid_id = 2

var new_oh = bid_template.outerHTML

new_oh = new_oh.replace(/_\[\[template\]\]/g, '')
new_oh = new_oh.replace(/\[\[bid_id\]\]/g, new_bid_id)

At this point if I console.log new_oh, it is exactly what I want …

我有以下HTML代码

<a href="http://www.google.com">Google</a>

当我点击链接时,我希望我的字符串包含下面的完整HTML代码

<a href="http://www.google.com">Google</a>

我尝试使用这种方法,但我只设法得到文本"谷歌",无法获得锚码.

$('#frame').contents().find('body').on("click", "a",  function () {
    var string = $(this).html();
    alert(string);
});

字符串警报仅Google在我需要时<a href="http://www.google.com">Google</a>.