堆棧內存溢出
  簡體   English   中英

使用JavaScript / JQuery將HTML重新添加到DIV中

[英]re-adding HTML into a DIV using JavaScript/JQuery

 原文  2014-04-11 16:52:09  4   6    javascript/ jquery/ html

問題描述

大家好我有以下Div，如下所示： 

<div id = '1'>
    <div>
        <div>
            <label class="right inline">Response:</label>
        </div>
        <div>
            <input type="text" name="responseText[]" value="" maxlength="400" />                          
        </div>
         <div>
            <input type="radio" name="responseRadio[]" value="" />                          
         </div>
    </div>
    <div>
        <input type="button" name="addNewRow" value="Add Row" />                      
    </div>
</div>

當用戶單擊按鈕時，我要再次添加以下Div： 

        <div>
            <div>
                <label class="right inline">Response:</label>
            </div>
            <div>
                <input type="text" name="responseText[]" value="" maxlength="400" />                          
            </div>
             <div>
                <input type="radio" name="responseRadio[]" value="" />                          
             </div>
        </div>

使用JavaScript或jQuery onclick函數能否實現？

6 個解決方案

解決方案1
 1  2014-04-11 17:01:41

嘗試這個： 

<script>
$(document).ready(function(){
    var divID='abc';
    var $mainDiv=$('#'+divID);
    $mainDiv.find('input[name="addNewRow"]').eq(0).click(function(){
        var $this=$(this);
        var $div=$(this).parents('div').eq(0).prev('div').clone();
        $this.parents('div').eq(0).prev('div').after($div);
    });
});
</script>

演示： http ： //jsfiddle.net/xT62m/

解決方案2
 1 已采納  2014-04-11 17:03:17

您可以對insertAfter使用clone方法：

HTML： 

<div id='1'>
    <div class="template"> <!-- mark a clone target -->
        ...
    </div>
    <div>
        <input type="button" name="addNewRow" value="Add Row" />
    </div>
</div>

JS： 

var $template = $('.template');
$('input[type=button]').click(function() {
    $template.clone().insertAfter($template);
});

演示： http ： //jsfiddle.net/VcBrz/

解決方案3
 0  2014-04-11 16:55:13

是的，請使用jquery附加功能https://api.jquery.com/append/ 

$('#1').append(html);

這是一個工作的jsfiddle http://jsfiddle.net/ZqQAu/1/

解決方案4
 0  2014-04-11 17:06:16

最好的辦法是克隆該div要添加到div#1 。

為便於操作，請通過按鈕將類添加到div ，並將每個類添加到表示行的div中。

HTML： 

<div id = 'id1'>
    <div class='row'>
        <div>
            <label class="right inline">Response:</label>
        </div>
        <div>
            <input type="text" name="responseText[]" value="" maxlength="400" />                          
        </div>
         <div>
            <input type="radio" name="responseRadio[]" value="" />                          
         </div>
    </div>
    <div class='buttonHolder'>
        <input type="button" name="addNewRow" value="Add Row" />                      
    </div>
</div>

Javascript（使用jQuery）： 

$(document).ready(function(){


    $('.buttonHolder input[type=button]').on('click', function(){
        //Clone existing row to template.
        var row = $('#id1 .row').first().clone(); 

        //Clear template
        $('input', row).val('');    

        $(row).insertBefore('.buttonHolder input[type=button]');
    });
});

jsFiddle示例：http://jsfiddle.net/9Z2RT/1/

解決方案5
 0  2014-04-11 17:10:01

使html像這樣： 

<div id="container">
<div class= 'template'>
    <div>
        <div>
            <label class="right inline">Response:</label>
        </div>
        <div>
            <input type="text" name="responseText[]" value="" maxlength="400" />                          
        </div>
         <div>
            <input type="radio" name="responseRadio[]" value="" />                          
         </div>
    </div>
    </div>
</div>

<div>
        <input type="button" name="addNewRow" id="btnAddRow" value="Add Row" />                      
</div>

點擊功能： 

$('#btnAddRow').click(function(){


var row = $('.template').first().clone();

$('#container').append(row);

});

這是小提琴演示

解決方案6
 0  2014-04-11 17:11:25

最簡單的方法是： 

<!DOCTYPE HTML>

<html>
    <head>
        <title>Untitled</title>
        <script>
            var m_TextToAdd = '<div> ';
            m_TextToAdd += '<div> ';
            m_TextToAdd += '    <label class="right inline">Response:</label>';
            m_TextToAdd += '</div>';
            m_TextToAdd += '<div>';
            m_TextToAdd += '    <input type="text" name="responseText[]" value="" maxlength="400" /> ';
            m_TextToAdd += '</div>';
            m_TextToAdd += ' <div>';
            m_TextToAdd += '    <input type="radio" name="responseRadio[]" value="" />';
            m_TextToAdd += ' </div>';
            m_TextToAdd += '</div>';
            function AddContent() {
                document.getElementById('div1').innerHTML += m_TextToAdd;
            }

        </script>
    </head>

    <body>
        <div id = 'div1'>
            <div>
                <div>
                    <label class="right inline">Response:</label>
                </div>
                <div>
                    <input type="text" name="responseText[]" value="" maxlength="400" />                          
                </div>
                 <div>
                    <input type="radio" name="responseRadio[]" value="" />                          
                 </div>
            </div>
            <div>
                <input type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>                      
            </div>
        </div>
    </body>
</html>

無論如何，我很高興看到它:-)我認為下一個代碼更具可讀性： 

<!DOCTYPE HTML>

<html>
    <head>
        <title>Untitled</title>
        <script type='text/javascript'>
            function AddContent() {
                var dest = document.getElementById('div1');
                //add label
                var lbl = document.createElement('label');
                lbl.innerHTML = 'Response:';
                lbl.className = 'right inline';
                dest.appendChild(lbl);
                //add line break
                dest.appendChild(document.createElement('br'));

                //add text input
                var input = document.createElement('input');
                input.type = 'text';
                input.name = 'responseText[]';
                input.maxlength="400";
                dest.appendChild(input);
                //add line break
                dest.appendChild(document.createElement('br'));

                //add radio button
                input = document.createElement('input');
                input.type="radio";
                input.name="responseRadio[]";
                dest.appendChild(input);
                //add line break
                dest.appendChild(document.createElement('br'));
            }

        </script>
    </head>

    <body>
        <div id = 'div1'>
            <label class="right inline">Response:</label>
            <br>
            <input class='nextLine' type="text" name="responseText[]" value="" maxlength="400" />                          
            <br>
            <input class='nextLine' type="radio" name="responseRadio[]" value="" />                          
            <br>
            <input class='nextLine' type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>                      
            <br>
    </body>
</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 有關刪除和重新添加到DOM的HTML視頻 jQuery removeAttr塊重新添加屬性 重新添加對話框時的jQuery Mobile異常 Javascript存儲區在重新添加之前未刪除所有元素 為 React 組件重新添加樣式 為什么我的jQuery插件無法刪除焦點上的文本並在模糊時重新添加文本？ 禁用使用jQuery將HTML元素添加到DIV 使用jQuery將html圖像添加到div / table 使用jQuery和HTML添加到div 淘汰JS可觀察對象，刪除並重新添加選擇選項
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM