Значение атрибута автоматически вставляется в двойную кавычку

Question

Я хочу разместить HTML-узел, как я создал. Но при использовании JS и вставке внутрь div одинарные кавычки изменяются на двойные. Код:

function createHederaObject(params){
    let Hederaobject =  '<hedera-micropayment '
        for(var i in params){
            if(params.hasOwnProperty(i) && i!=='attrID'){
                Hederaobject += i +"= '"+ params[i] + "' , " + "\n";
            }
        }

        Hederaobject += '></hedera-micropayment>';
        console.log(Hederaobject);

        var body = document.getElementById(params['attrID']);
        body.innerHTML += Hederaobject;
        //console.log((Hederaobject))
        return Hederaobject;
        //callback(Hederaobject);
    }

Я должен быть точно таким:

     <hedera-micropayment submissionnode= '0.0.1761' ,
        time= '1559313345' ,
        type= 'article' ,
        memo= '1275,79' ,
        paymentserver= 'http://localhost:9090/' ,
        recipientlist= '[{ "to": "0.0.99", "tinybars": "4666667" }]' ,
        contentid= '79' ,
        extensionid= 'ligpaondaabclfigagcifobaelemiena' ,
        redirect= '{ "nonPayingAccount": "/insufficient-amount/", "noAccount": "/account-not-paired/", "homePage": "/" }' ,></hederamicropayment>

Но все одинарные кавычки заменяются и становятся такими:

    <hedera-micropayment data-submissionnode="0.0.1761" ,="" data-time="1559313345" data-type="article" data-memo="1275,79" data-paymentserver="http://localhost:9090/" data-recipientlist="[{ &quot;to&quot;: &quot;0.0.99&quot;, &quot;tinybars&quot;: &quot;4666667&quot; }]" data-contentid="79" data-extensionid="ligpaondaabclfigagcifobaelemiena" data-redirect="{ &quot;nonPayingAccount&quot;: &quot;/insufficient-amount/&quot;, &quot;noAccount&quot;: &quot;/account-not-paired/&quot;, &quot;homePage&quot;: &quot;/&quot; }"></hedera-micropayment>

, которая создала проблему при анализе данных. В этом конкретном

  data-recipientlist= '[{ "to": "0.0.99", "tinybars": "4666667" }]' ,

У меня должна быть такая же структура.

Как сохранить одинарные кавычки как есть. Есть идеи ? Спасибо

Answer 1

Так работает innerHTML - все «строковые» узлы с атрибутами преобразуются в дерево DOM - и когда вы читаете информацию из него (например, с помощью «проверяющего элемента» браузера), атрибут узла DOM преобразуется в строку с двойнымцитаты)

document.body.innerHTML += `<div id='abc'>ABC</div>`;

console.log(abc);