如何使用javascript替换innerhtml中的值答案

【问题标题】：how to replace values in innerhtml using javascript如何使用javascript替换innerhtml中的值
【发布时间】：2015-09-13 16:01:16
【问题描述】：

我正在动态地（单击单选按钮）将一行（在表格中）的内部 html 复制到另一行，但在删除一些元素之后。

var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
    .replace('<div class="custom-radio" style="margin-top:50px;">',"")
    .replace('<label for="shareredio"+e""></label>',"")
    .replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
    .replace('<label for="sharecheck"+e""></label>',"")
    .replace('Share fare',"");

document.getElementById('copyDiv').innerHTML = a;

我对javascript的了解还不够，但是如果有更好的方法，请帮助...

【问题讨论】：

你可以从 DOM 中移除元素，而不是做很多替换。此外，您的 HTML 字符串似乎有很多连接问题。
谢谢... :) @Rory McCrossan 但我可以知道如何... +e 是针对不同行动态生成的变量
你的方法不耐用。我同意@Rory。您应该使用 DOM 来操作您的元素。它更加高效和可追溯。
当我说我对 javascript 不太了解时，为什么人们会投票反对，我是新手。

标签： javascript jquery html replace innerhtml

【解决方案1】：

这可能不是最好的方法，但我想我至少会很快给你一个答案。这是使用 jQuery 来操作 DOM。

var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();

var result = $a.html().replace('Share fare', "");

$('#copyDiv').html(result);

【讨论】：

感谢您的解决方案，这工作正常，但有一个问题。我正在将内部 html 从一个表复制到另一个表，您的代码按我想要的方式工作，但它也从父表中删除了元素（我不想要），我只想删除这些元素并复制到子表。是否也有任何解决方案.. 除了它工作得很棒
啊，对了，我没有意识到你不想改变原来的元素。在这种情况下，只需将 .clone() 添加到原始选择器。我已经更新了我的答案给你看。

【解决方案2】：

这样的？

$(document).ready(function() {
    $('.copy').on('change', function(){
        if($('.copy:checked').val() == 'yes'){
            $('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
            $('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
            $('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
        }
        else {
            $('.table2').find('.rowContents1').html('');
            $('.table2').find('.rowContents2').html('');
            $('.table2').find('.rowContents3').html('');
        }
    });
});

table {
    border: 1px solid gray;
}
td, th {
    border: 1px solid gray;
    padding: 5px;
    text-align: center;
}
div{
    display: inline-block;
    margin-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
    Table1
    <table class="table1">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1">This is the Contents of Row 1</td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2">This is the Contents of Row 2</td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3">This is the Contents of Row 3</td>
            </tr>
        </body>
    </table>
</div>
<div>
    Table2
    <table class="table2">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1"></td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2"></td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3"></td>
            </tr>
        </body>
    </table>
</div>

我使用.html() 重写了每个td 中的内容。 .find() 函数只是遍历元素树并找到后代$('.table2').find('.rowContents1') 是说在类.table2 的元素中，找到类.rowContents1 的后代。

希望这会有所帮助，并且是您正在寻找的内容

【讨论】：

感谢您的解决方案....但我实际上正在寻找类似于接受的答案的东西。非常感谢您的时间和帮助，也想为这个答案投票，但没有足够的积分。