Javascript 如何将动态创建的输入（或文本框）值发送到iframe，并在iframe中以HTML的形式显示？

如何将动态创建的输入（或文本框）值发送到iframe，并在iframe中以HTML的形式显示

我正试图使用下面的代码（在JSFIDLE上）来实现这一点，但其他解决方案也不错。谢谢Jquery也很好

以下是HTML：

<a href="#" id="new" rel="create">new</a><br>
<a href="#" id="another" rel="create">another</a><br>

<input id="thisButton" type="button" name="Display" value="Edit HTML Below then Click to Display"/>

<iframe id="iframetest" src="" style="background: White;"></iframe>

下面是Javascript：

var counter = {};

var myHTML = {
    'new': '<input id="test%n" name="test" value="<b>blah</b> blah blah %n">',
    'another': '<input id="another%n" name="test" value="<b>cool</b> COOL! %n">'
};

var htmlForId = {
    'foo': ['a','b','c'],
    'bar': ['d','e','f']
}

var createEls = document.querySelectorAll('a[rel=create]');
for(var i = 0; i < createEls.length; i++) {

  createEls[i].onclick = create;
}

function create() {
    var id = this.id;

    var div = document.createElement('div');
    div.className = 'create';
    if (counter[id]===undefined) { counter[id] = 1; }
    var thecurrentid = counter[id];
    div.id = id + counter[id]++;

    if (div.id in myHTML) {
        div.innerHTML = myHTML[div.id].replace(/%n/g, thecurrentid);
    } else if (this.id in myHTML) {
        div.innerHTML = myHTML[this.id].replace(/%n/g, thecurrentid);
    } else {
        div.innerHTML = div.id;
    }
    document.body.appendChild(div);

    return false;
}

var myArray = [
    'b<strong>l</strong>a bla bla', // index 0
    'foo', // index 1
    'test' // index 2
];
function appendArray(a) {
    for(var i = 0; i < a.length; i++) {
        var div = document.createElement('div');
        div.className = 'loop';
        div.innerHTML = a[i];
        document.body.appendChild(div);
    }
}

var计数器={}；
var myHTML={
“新”：“，
“另一个”：”
};
var htmlForId={
‘foo’：[‘a’、‘b’、‘c’]，
条形图：['d'，'e'，'f']
}
var createls=document.querySelectorAll（'a[rel=create]'）；
对于（var i=0；ila bla bla'，//索引0
'foo'，//索引1
'test'//索引2
];
函数数组（a）{
对于（变量i=0；i

jsfiddle：

带注释的JSFIDLE（如果需要）：

---

您可以使用contentDocument访问iframe的文档对象

document.getElementById("thisButton").onclick = function(){
    var html = "<b>Dynamic Content</b>"; //TODO: get the value dynamically from textbox
    document.getElementById("iframetest").contentDocument.body.innerHTML = html;
};

document.getElementById（“thisButton”）.onclick=function（）{
var html=“Dynamic Content”；//TODO:从文本框中动态获取值
document.getElementById（“iframetest”）.contentDocument.body.innerHTML=html；
};

有人能帮我组装一下吗？我是javascript新手