动态创建SVG元素添加到指定位置

需求：当支付方式为预收款账户时，右侧输入金额列需要添加一个可以选择预收款单据金额的小按钮。

实现效果：

 

思路： 当选择支付方式的时候进行判断，如果时预收款，则调用神奇的函数来在指定位置创建一个小按钮。小按钮会绑定一个弹出框的方法，点击时会打开弹出框提供数据。

直接上代码：

function createFeather(paywayamountId, subId, paywayId) {
    // 获取payway_amount的div元素（这里就是需要添加的位置父元素）
    var containerDiv = document.getElementById(paywayamountId);
    
    //这里获取两个元素
    var existingSvg = containerDiv.querySelector('.svgfeather');
    var existingRow_oper = containerDiv.querySelector('.row-oper');
    
    //已经存在，则进行替换
    if (existingSvg) {
        containerDiv.removeChild(existingSvg);
    }
    if (existingRow_oper) {
        containerDiv.removeChild(existingRow_oper);
    }
    // 创建SVG元素
    var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svgElement.setAttribute("class", "svgfeather");    //创建类名
    svgElement.setAttribute("onmousedown", "openDialog(event," + JSON.stringify(subId) + "," + paywayId +")");    //创建点击的方法
    svgElement.setAttribute("height", "15");
    svgElement.setAttribute("width", "15");
    svgElement.style.cursor = "pointer";

    // 创建use元素
    var useElement = document.createElementNS("http://www.w3.org/2000/svg", "use");
    useElement.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "/images/images.svg#feather");

    // 将use元素添加到SVG元素中
    svgElement.appendChild(useElement);

    // 将SVG元素添加到ID为'payid'的div中
    containerDiv.appendChild(svgElement);
}