Как изменить HTML в массиве?

Если я правильно понял задачу, то вот так:

function getAndRenderTasks() {
  $.getJSON("/tasks/api/v1.0/tasks", function(data) {
    var tasks = [] // Место хранения всех задач
    $.each(data, function(key, val) {
      var taskData = [] // промежуточные данные
      for (var i = 0; i < val.length; i++) {
        $.each(val[i], function(key1, val1) {
          var $elem = $("<div class='" + key1 + "'>" + val1 + "</div>");
          // Изменяете в элементе что нужно
          taskData.push( $elem.get(0).outerHTML );
        })
      }
      var $task = $("<div taskId='" + key + "'>" + taskData.join('') + "</div><hr>");
      // Изменяете в элементе что нужно
      tasks.push( $task.get(0).outerHTML );
    })
    $("<div/>", {
      "class": "my-new-list",
      html: tasks.join("")
    }).appendTo("body")
  })
}

На самом деле вопрос скорее обширный, нежели наоборот. Потому что есть много способов сделать то, что вы хотите. Если я правильно понял чего вы хотите))

1. Способ: создавать элементы на лету, добавлять в них необходимые атрибуты и вставлять уже их в родительские элементы

В примере ниже создается ссылка, добавляется к ней заголовок, href и добавляется через appendChild (это на чистом js. Для jquery будет скорее всего append) в body.

var a = document.createElement('a'); 
var linkText = document.createTextNode("my title text"); 
a.appendChild(linkText); 
a.title = "my title text"; 
a.href = "http://example.com"; 
 
document.body.appendChild(a);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="div1"></div>

А так добавили в див..

var mydiv = document.getElementById("myDiv"); 
var aTag = document.createElement('a'); 
aTag.setAttribute('href',"yourlink.htm"); 
aTag.innerHTML = "link text"; 
mydiv.appendChild(aTag);

<div id="myDiv"></div>

Так можно создавать и добавить узлы друг в друга, сделать это в цикле: создать одну общую переменную и добавлять в нёё всё и затем эту финальную переменную добавить в шаблон

2. Способ (из него будет следовать 3 способ): Заводить строковую переменную, в неё складывать все данные, которые есть в цикле (включая атрибуты элементов и прочее) и затем добавить всё это в шаблон:

var content = ''; // это накопительная переменная 
 
for (var i = 0; i < 3; ++i) { 
 
  var div = '<div class="key' + i + '">' + getLink(i) + ' divval="' + i + '"</div>'; 
  content += div; 
} 
 
$('#content').html(content); 
 
 
function getLink(event_id) { 
  return '<a class="close-task"' + 
             'eventid="' + event_id + '"' + 
             'alt="Отметить как выполненное"' + 
             'title="Отметить как выполненное"' + 
             'href="#">Ссылка № ' + event_id + 
             '<i class="checkmark box icon"></i>' + 
         '</a>'; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="content"><div>

Смысл состоит в том, чтобы разбить код на составные куски (на те, из чего состоит генерируемый блок) и дальше по кусочкам их генерировать и вставлять в один основной блок и далее уже в шаблон.

3. Способ - использовать шаблонизаторы, например Handlebars.js или mustache.js или много других. Смысл их, в принципе, вытекает из способа №2, когда у вас есть готовые шаблоны, которые будут вставляться в определенные блоки и затем вставляться в основной шаблон, при этом не захламляя сам скрипт такими "строковыми накоплениями"