html로 요소

Question

내가 유효한 HTML로 작성된 속성의 문자열을 가지고, 나는 실제 HTML 요소 (안 요소의 HTML 문자열)에 이러한 속성을 넣어하려는 속성을.

예를 들어, 변수 이름이 attributesStr 인 민감한 문자열이 있는데이 속성을 #htmlElement div에 추가하려고합니다.

<div id="htmlElement" class='regularClass' title='Title... with spaces!' style='color: red; font-weight: bold;' data-attributenovalue> 
    The HTML element! 
</div> 

이 어떻게 자바 스크립트 또는 jQuery를이 작업을 수행 할 수 있습니다처럼

JQuery와/자바 스크립트 코드가 실행 된 후

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
// Your special code to add the attributes to `#htmlElement` goes here.

<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

, #htmlElement이 보일 것입니다?

---

첫 번째 시도 : 나는 공간에 attributesStr을 보내고 .split()으로 내가 이것을 할 수있는 생각하고 =에 각각의 속성 키 값 쌍을 분할하고, 한 후 반복하는 그 배열과 각 키 값 쌍을 추가하는 jQuery의 .prop() 또는 .attr()하지만,이 두 가지 이유로 작동하지 않을 것이다 : 그들은 공간을 가지고 있기 때문에

1. 그것은 style 및 title 속성에 실패합니다.
2. 일 수도 있습니다.은 값이없는 속성에서 작동하지 않습니다.

Answer 1

attributesStr을 가지고 삽입

$(document).ready(function(){ 
 
$("#htmlElement").attr("class", "regularClass"); 
 
$("#htmlElement").attr("title", "Title... with spaces!"); 
 
$("#htmlElement").attr("style", "color: red; font-weight: bold"); 
 
$("#htmlElement").attr("data-attributenovalue",true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

click here for attr() usage

. 이를 위해 기존 태그를 제거하고 문자열을 삽입 한 다음 나머지 HTML을 되돌려 노드를 재구성해야합니다.어쩌면

var dummHTML = $("<div "+attributesStr+"></div>"); 
$.each(dummHTML[0].attributes, function(i,v){ 
$('#htmlElement').attr(v.nodeName,v.nodeValue); 
}); 

Answer 2

하여 문자열을 분리하지 왜

','

var attributesStr = ""; 
 
attributesStr = attributesStr + " class='regularClass'," ; // Needs to handle key value attributes. 
 
attributesStr = attributesStr +" title='Title... with spaces!',"; // And attributes with spaces. 
 
attributesStr = attributesStr +" style='color: red; font-weight: bold;',"; // And style with multiple properties. 
 
attributesStr = attributesStr +" data-attributenovalue,"; // And attributes with no value. 
 

 
var array = attributesStr.split(','); 
 

 
array.forEach(function(item){ 
 
property = item.split('='); 
 
$('#htmlElement').attr(property[0].trim()); 
 
if(property[1]) $('#htmlElement').attr(property[0].trim(), property[1].trim()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Answer 3

이 당신에게 첫 번째 분할을 얻을 것이다

attributesStr.match(/[^\s=]+(=['][^']*['])?/g) 

결과 :

["class='regularClass'", "title='Title... with spaces!'", "style='color: red; font-weight: bold;'", "data-attributenovalue"] 

그런 다음 foreach에서 제안한대로 attrs를 처리 할 수 ​​있습니다.

Answer 4

.attr()을 jquery에서 사용할 수 있습니다. 다음은 작동중인 스 니펫입니다. 기존 outerHTML에

Answer 5

이 시도 아이디어는

을 :의 내용을 요소를 제거한 다음 제거하고 새 속성을 사용하여 다시 만듭니다.

,

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
// Your special code to add the attributes to `#htmlElement` goes here. 
 
var $innerHTML = $("#htmlElement").html() 
 
$("#htmlElement").remove() 
 
var $newElement = "<div id='htmlElement' " + attributesStr + ">" + $innerHTML + "</div>" 
 

 
$("body").after($newElement)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="htmlElement"> 
 
    The HTML element! 
 
</div>

Answer 6

하지 최선의 선택하지만 전체 문자열을 사용하는 데 필요한 경우 :

var attributesStr = ""; 
 
attributesStr += " class='regularClass'"; // Needs to handle key value attributes. 
 
attributesStr += " title='Title... with spaces!'"; // And attributes with spaces. 
 
attributesStr += " style='color: red; font-weight: bold;'"; // And style with multiple properties. 
 
attributesStr += " data-attributenovalue"; // And attributes with no value. 
 

 
var element = document.getElementById('htmlElement'); 
 

 
var tag = element.tagName; 
 

 
element.outerHTML = '<' + tag + attributesStr + element.outerHTML.substring(tag.length + 1);

<div id="htmlElement"> 
 
    The HTML element! 
 
</div>